
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
简单来说,axios
是一个基于promise
的 HTTP 客户端,用于 node.js 和浏览器。
XMLHttpRequests
node.js
创建http
请求Promise
APIJSON
数据XSRF
安装
// 使用 npm
npm install axios
// 使用 cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
引入
import axios from 'axios'
使用
axios({
url:'xxx', // 请求地址
method:"GET", // 请求方法
params:{ // 注意:get 请求使用 params,post 请求用 data
type: '',
id: 1
}
}).then(res => {
// 返回的数据
console.log(res);
})
为什么要进行封装?假设每发起一次HTTP
请求,就要将超时时间、请求头、请求地址、错误处理等这些重复的操作都写一遍,不仅浪费时间,维护性也不好。
所以我们应该对axios
进行封装
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'http://prod.xxx.com'
}
在本地调试时,可能需要在vue.config.js
中配置代理
devServer: {
proxy: {
'/proxyApi': {
target: 'http://dev.xxx.com',
changeOrigin: true,
pathRewrite: {
'/proxyApi': ''
}
}
}
}
新建一个 axios.js 文件,将此步骤和3、4、5步的代码复制到里面
const request = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 30000,
headers: {
get: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
post: {
'Content-Type': 'application/json;charset=utf-8'
}
},
})
请求拦截器可以给每个请求加上 token
// 请求拦截器
request.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在 token
// 如果存在,则统一在 http 请求的 header 都加上 token
token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.error(error)
})
响应拦截器可以在接收到响应后对数据进行处理后再返回,如根据状态码判断登录状态、授权
// 响应拦截器
axios.interceptors.response.use(res=> {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
if (res.status === 200) {
if (res.data.code === 5xx) {
// 未登录跳转登录页
} else {
return res.data // 这里设为 res.data 后当我们拿数据时就不需要再用 res.data.data 了
}
} else {
return Promise.reject(res)
}
}, error => {
// 可以在这里对异常状态作统一处理
if (error.res.status) {
return Promise.reject(error.res)
}
})
export default request;
创建一个 api.js 文件并引入第 5 步导出的 axios 实例 request
import request from './axios.js'
export const getList = (data = {}) => {
return request({
url: 'apps/api/org/list',
method: 'post',
data
})
}
// .vue
import { getList } from '@/api/api.js'
getList ({ id: 2 }).then(res => {
console.log(res)
})
这样就可以对网络请求进行统一管理了,以后维护修改只需要在api.js
文件中操作就行了
axios
封装,就可以大大加快开发效率;