简介:在发送axios请求的时候,我们会发现大多数的请求地址都有他的公共部分,都需要重复书写,我们程序员应该将这些重复的代码单独封装出来,设置相应的接收参数,让其实现灵活调用.
1.首先引入axios(前提是通过npm或者文件或者其他方式,让它存在嗷)
(我这里是通过npm下的包,其他方式同理)
import axios from 'axios'
2.创建一个实例
const api = axios.create({
baseURL: '', // 所有请求的公共地址部分
timeout: 3000 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
})
3.设置请求拦截器
// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
// config 请求的所有信息
// console.log(config);
return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
// 请求发生错误时的相关处理 抛出错误
Promise.reject(err)
})
4.设置响应拦截器
api.interceptors.response.use(res => {
// 我们一般在这里处理,请求成功后的错误状态码 例如状态码是500,404,403
// res 是所有相应的信息
console.log(res)
return Promise.resolve(res)
}, err => {
// 服务器响应发生错误时的处理
Promise.reject(err)
})
5.暴露出去
export default api
6.封装接口
import api from '../index.js';
下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = (params) => api.get(`/apigb/v1/component`, { params})
export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)
// 下面是详细的写法
export const xxxx = (params) => api({
url: '', // 请求地址
method: 'post', // 请求方式
// data: params, // (一般post请求,我们习惯使用 data属性来传参)
params: params //(一般get请求,我们习惯使用params属性来传参)
// 注意:data,和 params 两个属性传参使用,并不是固定的,也可以调换使用。
})
axios封装好后就可以随心所欲的调用啦,不仅可以让代码更加简洁,并且可维护性更好,模块化的书写方式同样可以代码更灵活!