1、初识 axios
Axios，是一个基于 promise 的网络请求库，作用于 node.js 和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequest。
- 主要特点：
从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF
2、安装 axios
- 1、安装 axios
npm install axios
- 2、挂载 axios
在 main.js 文件中，添加如下内容：
import axios from 'axios'
Vue.prototype.$http= axios
我们便可以通过 this.$http 的方式来发起请求了
3、配置网络代理
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
// 指定使用的ip地址，默认为localhost，如果使用'0.0.0.0'则可以被外部访问
host: '0.0.0.0',
// 指定服务监听的端口号
port: 9527,
// 代理
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
}
})
其中，process.env.VUE_APP_BASE_API 为我们在多环境配置文件中配置的请求路径，例如，.env.development 文件：
# Asurplus管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
则我们发出的请求路径为：
http://localhost:9527/dev-api/xxx
4、使用 axios
httpTest() {
this.$http.get(process.env.VUE_APP_BASE_API + '/test').then(res => {
console.log(res)
})
}
得到的响应：
{
"data":{
"msg":"操作成功",
"code":200,
"data":"this is data"
},
"status":200,
"statusText":"OK",
"headers":{
"connection":"close",
"content-encoding":"gzip",
"content-type":"application/json;charset=UTF-8",
"date":"Mon, 03 Apr 2023 06:47:10 GMT",
"transfer-encoding":"chunked",
"vary":"Accept-Encoding",
"x-powered-by":"Express"
},
"config":{
"transitional":{
"silentJSONParsing":true,
"forcedJSONParsing":true,
"clarifyTimeoutError":false
},
"adapter":[
"xhr",
"http"
],
"transformRequest":[
null
],
"transformResponse":[
null
],
"timeout":0,
"xsrfCookieName":"XSRF-TOKEN",
"xsrfHeaderName":"X-XSRF-TOKEN",
"maxContentLength":-1,
"maxBodyLength":-1,
"env":{
},
"headers":{
"Accept":"application/json, text/plain, */*"
},
"method":"get",
"url":"/dev-api/test"
},
"request":{
}
}
可以看到，包括一些网络的响应状态及信息也一起拿到了，但是这样我们每次都需要判断 httpStatus 是否为 200，才能进行正常的业务逻辑处理，非常繁琐
5、配置请求拦截器和响应拦截器
import axios from 'axios'
import {Message} from 'element-ui'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?';
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
const part = encodeURIComponent(propName) + "=";
if (value !== null && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName + '[' + key + ']';
const subPart = encodeURIComponent(params) + "=";
url += subPart + encodeURIComponent(value[key]) + "&";
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
return config
}, error => {
Promise.reject(error)
})
// response拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = res.data.msg
if (200 !== code) {
Message({
message: msg,
type: 'error'
})
return Promise.reject(new Error(msg))
}
// 返回响应信息
else {
return res.data
}
},
error => {
let {message} = error;
if (message === "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
- 1、请求拦截器
1、默认请求头内容：Content-Type=application/json;charset=utf-8，如需要传递 token 等身份验证信息可在请求拦截器中加入
2、配置了默认请求超时时间：10s
3、get 请求如果传递了 params 参数，则将参数按照 ?key=value&key1=value1 的方式拼接在请求地址上
- 2、响应拦截器
1、默认以返回的 code = 200 为成功响应，返回响应信息中的 data 对象
2、请求业务层面的错误响应则直接提示业务响应对象中的 msg 信息
3、请求网络层面的错误响应根据错误类型提示响应的提示信息
6、封装请求
- 1、test.js
import request from '@/utils/request'
export function test(data) {
return request({
url: '/test',
method: 'post',
data: data
})
}
- 2、发起请求
引入我们刚刚配置的请求拦截器和响应拦截器，data 为我们需要传递的参数，在组件中使用：
import {test} from "@/api/test";
methods: {
httpTest() {
test(this.data).then(res => {
console.log(res)
})
}
}
得到的响应：文章来源：https://www.toymoban.com/news/detail-409977.html
{
"msg":"操作成功",
"code":200,
"data":"this is data"
}
如您在阅读中发现不足，欢迎留言！！！文章来源地址https://www.toymoban.com/news/detail-409977.html
到了这里，关于【VUE】6、VUE项目中引入axios的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
