Vue方向:axios的配置使用、instance实例对象的创建、以及axios的封装处理

axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定:


在mian.js中引用axios,并邦到原型链上。使用插件的时候,一般要在入口文件main.js中引入,因为mian.js是项目首先运行的文件:


用法:

https://upload-images.jianshu.io/upload_images/12797094-9a922facbfa3aab0.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp

vue-axios是将axios集成到Vue.js的小包装器,可以像插件一样进行安装:

在mian.js中引用axios,vue-axios,通过全局方法 Vue.use() 使用插件,就相当于调用install方法:


使用方法

新建一个utils文件夹下的index.js的文件



// 这个时axios的配置

import axios from 'axios';

// import { config } from 'vue/types/umd';

axios.defaults.baseURL = 'http://127.0.0.1:3000';

// 错误信息处理

const  errorHandle = (status, other) => {

  switch (status) {

    case 400:

      console.log('信息验证失败');

      break;

    case 401:

      console.log('认证失败');

      break;

    case 403:

      localStorage.removeItem("token");

      console.log('token校验失败');

      break;

    case 404:

      console.log('请求资源不存在');

      break;

    default :

      console.log(other);

      break;

  }

}

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

  // 在发送请求之前做些什么

  // console.log(config);

  if(localStorage.elementToken){

    config.headers.Authorization=localStorage.elementToken;

  }

  console.log(config);

  return config;

}, function (error) {

  // 对请求错误做些什么

  return Promise.reject(error);

});

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

  // 对响应数据做点什么

  // console.log();

  // console.log(response.data.token);

  // response.headers['Authorization'] = response.data.token;

  return response.status=== 200 ? Promise.resolve(response): Promise.reject(response);

}, function (error) {

  // 对响应错误做点什么

  const {response}=error;

  if(response){

    errorHandle(response.status,response.data.message)

    return Promise.reject(response.data);

  }else{

    console.log('断了');

  }

});

export default axios;



在main.js中放置



importaxiosfrom'axios'

importVueAxiosfrom'vue-axios'

Vue.use(VueAxios,axios);



创建一个新文件夹API下的文件api.js



importaxiosfrom'@/utils/index';

// 获取列表

exportfunctiongetLoginApi(data){

returnaxios.post('/login',data)

//返回的时promies对象,所以直接return出去就好了

}



在vue文件中使用他



import {getLoginApi, getOrdergressApi } from '@/API/api'

    async doLogin1(){

      let a=await getOrdergressApi().catch((a)=>{

        console.log(a);

      });

      console.log(a);

    }




链接:https://www.jianshu.com/p/79a9af41eeca

你可能感兴趣的:(Vue方向:axios的配置使用、instance实例对象的创建、以及axios的封装处理)