Vue3使用axios的配置教程详解

1.安装

npm install --save axios vue-axios

2.在src根目录创建service文件夹。然后创建axios.js

2.1在axios.js添加拦截器,请求拦截:initAxios.interceptors.request;响应拦截:initAxios.interceptors.response

import axios from "axios";

const initAxios = axios.create({
  timeout: 1800000//数据响应过期时间
})

//请求拦截器
initAxios.interceptors.request.use((config) => {
  //在发送之前做点什么
  return config
}, (error) => {
  //对请求错误做点什么
  return error
})

//响应拦截器
initAxios.interceptors.response.use((response) => {
  if (response.resultCode === 200 ) {
    return response.data
  } else {
    return {resultCode: -1}
  }
})
//导出
export default () => initAxios

3.在文件夹再创建一个service.js文件

//引入封装好的 axios
import Axios from './axios'

//实例化
const instance = Axios()

//创建需要的请求方法:get post put delete
//url:请求的接口地址
//params:请求参数
//headers:请求头
export default {
  get(url, params, headers) {
    return instance.get(url, {params, headers})
  },
  post(url, params, headers) {
    return instance.post(url, params, {headers})
  },
  put(url, params, headers) {
    return instance.put(url, params, {headers})
  },
  delete(url, params, headers) {
    return instance.delete(url, {params, headers})
  }
}

 4.再创建一个index.js

//引入封装好的 service
import service from "@/service/service";

//声明一个基础接口变量
let baseURL;

//配置开发环境
if (process.env.NODE_ENV === 'development') {
    baseURL = 'http://www.****.com:8000/';
}

// 配置生产环境
if (process.env.NODE_ENV === 'production') {
  baseURL = 'http://www.*****.com:8001/';
}

//设置请求头（如果请求头统一的话可以在axios文件设置，则无须从这里传过去）
const header = {
  Accept: 'application/json;charset=UTF-8',
}

//根据自身需求
let _service={
    getList(data) {
        const url = baseURL + 'index/getList';
        return service.post(url, data, header);
    }
}


//导出
export default _service

5.使用方法

import _service from "@/service";

_service.getList({你的参数}).then(res => {
   console.log(res)
})

附: vue3没有this.所以使用的时候直接引用就好,如果项目比较大,接口多,可以分模块定义接口,使用的时候也是分模块导入.  以admin模块接口举例

说明:因为我的项目只有post请求,我就把请求头写在post方法里面了.后续的接口定义就省去了请求头的参数.

1.admin模块,admin.js 

2.index.js 引入接口统一导出

3.vue页面引用 ,此时只有admin.js定义的接口.

4.methods方法调用接口,其中 _utils.setFormData(this.searchModel) 是我项目里自定义的一个参数格式转化,this.loadData(res) 是我项目里对响应数据统一处理的方法

总结

以上就是vue3的配置