vue3.0 axios配置与封装

axios与vue-axios下载

npm install axios --save-dev
npm install vue-axios --save-dev

项目引入

局部引入

在需要引入的页面

import axios from 'axios'
import vueAxios from 'vue-axios'

全局引入

在 main.js 中引入,3.0引进了一个新的函数名 createApp(),将把 App.vue 挂在到全局。因此定一个 const app = createApp(App) ,类似于 2.0 中的 Vue,2.0中用 Vue.propotype.axios = axios 进行挂载,而3.0中需要使用 app.config.globalPropoties.axios = axios 进行全局挂载

axios 封装

  1. 安装完成后可以在 src 目录下建一个文件放配置文件

    • config.js 文件用来储存后端请求接口
    • http.js 文件用来封装 axios 请求方式
    • index.js 所有调用接口的方法

config.js 可以配置不同环境的接口

//config.js
export default {
  baseUrl: {
    dev: "http://XXXXXXXXXXX", // 开发环境
    // fat: 'http://xxx.xx.xx.xx:8080' 
    //uat : "http://production.com" 
  },
};

http.js 封装 axios

请求超时时间、get 请求、 post 请求、不用再去每个页面引入 axios 文件

import axios from "axios"; // 引用axios
import config from "src/api/config";

const instance = axios.create({
  baseURL: config.baseUrl.dev,
  timeout: 60000,
});
//get请求
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: params,
      })
      .then((response) => {
        resolve(response);
      })
      .catch((err) => {
        reject(err);
      });
  });
}
//post请求
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.post(url, data).then(
      (response) => {
        resolve(response.data);
      },
      (err) => {
        reject(err);
      }
    );
  });
}

http.js 封装拦截响应请求

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 获取 token
    if (localStorage.getItem('token')) {
      // 添加 token 请求头
      config.headers.Authorization = localStorage.getItem('token')
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    // 隐藏加载图
    // 获取code,对不同码执行不同逻辑
    const res = response.data;
    // 返回成功
    if (res == 200) {
      return res;
    }
    // token 异常
    if (res === 508 || res === 512 || res === 514) {
      // 登出 清除token缓存
    }
    console.log("res", response);
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

index.js 调用接口方法

引入封装的 get 请求方法和 post 请求方法,直接调用后台接口

import { get, post } from
export const getData = (params) => get('后端接口地址',params);
export const postData = (data) => post('后端接口地址',data);
//此处如果有参数传入给后端就需要写上参数 params/data 否则可以为空
export const getData = () => get(config.baseUrl.dev);
export const postData = () => post(config.baseUrl.dev);

在界面调用 index.js 里的方法就行

import { getData } from '@/api/index.js';
export default {
    name: '',
    mounted() {
        this.getCompany();
    },
     methods: {
        getCompany(){
            getData().then(res=> {
            })
            .catch(error=>{
                console.log(error)
            });
         },
    },
}
Last modification:May 12th, 2021 at 06:42 pm
如果觉得我的文章对你有用,请随意赞赏