基于vue封装axios的大概思路

1,517 阅读1分钟

目录结构如下

request

  request.js
  api.js

一.在request.js中的步骤如下

1.引入axios
import aixos form 'axios';
2.创建axios实例

const instance = axios.create({

baseURL:'xxxxxx';

}

3.请求和响应拦截

请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。

// 请求拦截(配置发送请求的信息)
axios.interceptors.request.use(function (config) {
  // 处理请求之前的配置
  return config
}, function (error) {
  // 请求失败的处理
  return Promise.reject(error)
})

响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。

// 响应拦截(配置请求回来的信息)
axios.interceptors.response.use(function (response) {
  // 处理响应数据
  return response
}, function (error) {
  // 处理响应失败
  return Promise.reject(error)
})

4.导出axios实例
export default instance;

二.在api.js中的步骤如下

1.引入request.js
import request from './request' ;
2.定义方法 a,保存请求地址url
const a = () => request.get ('/所调用的接口url')
3.导出方法 a
export default a

在需要调用接口的页面中引用方法 a

a().then((res) =>{

console.log(res);

}).catch((error) =>{

console.log(error);

})