axios封装详细教程

一、首先安装依赖

npm install axios————安装axios

二、引入axios

//utils/request.js导入axios
import axios from 'axios'

三、创建一个实例

// 创建了一个新的axios实例
const service = axios.create({
  baseURL: "http://admin-tengxun.net", // 基地址
  timeout: 5000 // 请求超时
})

四、配置请求拦截器，响应拦截器

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
 }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

五、导出axios实例

export default service // 导出axios实例

六、封装接口

// 导入封装接口的函数
import request from '@/utils/request.js'

// 获取员工列表
export function getUserList(params) {
  return request({
    url: `/sys/user`, // 请求地址
    method: 'get',  // 请求方式
    params // 一般get请求，习惯使用params属性来传参！
  })
}
// 新增员工列表
export function postUserList(data) {
  return request({
    url: `/sys/user`,
    method: 'post',
    data // post使用data传参
  })
}
// 删除员工列表
export function delUserList(id) {
  return request({
    url: `/sys/user/${id}`,
    method: 'delete'
  })
}

//箭头函数写法
export const getUserList = (params) => {
  return request({
    url: `/sys/user`,
    method: 'get',
    params
  })
}

七、页面使用接口

格外拓展：

1、vue.config.js下配置基地址：

2、合并-导入store携带token

import axios from 'axios' //导入axios
import store from '@/store/index.js' //导入store状态


// 创建了一个新的axios实例
const service = axios.create({
  baseURL: "http://ihrm-tengxun.net", // 基地址
  timeout: 5000 // 请求超时
})

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
    // 请求头携带token
    config.headers.Authorization = `Bearer ${store.state.user.token}`
 }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default service // 导出axios实例