axios二次封装

1、安装

npm install axios;

2、在项目目录下引入axios

我直接在src下面建api文件夹，api下面为分装的axios和根据不同模块创建不同的js文件用于管理api接口的service

3、axios.js二次封装

import axios from 'axios';

import { baseURL } from './config.js'

//设置超时时间，单位毫秒

axios.defaults.timeout = 50000;

axios.defaults.baseURL = baseURL;

/* const service = axios.create({

    baseURL: baseURL, // api的base_url

    timeout: 5000 // 请求超时时间

  });

  */

//设置是否允许跨域和是否允许携带凭证，如果该设置为false，请求时不允许携带凭证

// axios.defaults.withCredentials = true;

// 添加超时后的处理（axios中需要你根据error信息来进行判断）

axios().catch(error => {

    const { message } = error;

    if (error.code === 'ECONNABORTED' && message.indexOf('timeout')> -1){

      // 超时处理，可以直接弹出错误或者重新发起一次请求

      alert("请求超时！请检查网络问题");

    }

      // 若不是超时,则返回未错误信息

      return Promise.reject(error);

  })

//设置请求头

/* axios.defaults.headers["Content-Type"] = " multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW"; */

// 请求拦截器

axios.interceptors.request.use(

  config => {

    if (localStorage.getItem("token") != null&&

     localStorage.getItem("token") != undefined&&

      config.url.indexOf('getToken.do') == -1) {

      config.headers.Authorization = localStorage.getItem("token")

    }

    return config;

  },

  err => Promise.reject(err)

);

// response interceptor

axios.interceptors.response.use(

  response => {

    // response 根据不同status 状态返回对应不同的comfirm

    const res = response.data

    if (res.code === '后端返回的status或者code获取其他状态码') {

      // console.log('登录状态已过期')

    } else {

      return res

    }

  },

  error => {

    // console.log('err' + error) // for debug

    return Promise.reject(error)

  }

)

export default axios

如果报错说不同源则与后台沟通让他允许你的访问

4、config.js

//判断是开发(development)还是生产(production)

export const baseURL = process.env.NODE_ENV == 'development'? 'http://XXXXXXXX.com/':'http://XXXXXXXX.com/'

5、main.js

import axiosApi from './api/axios/axios.js'

Vue.use(axiosApi);

6、login.js

1、url ：请求接口的地址（就是baseURL后面的哪部分）

2、method：请求方法

3、data：post请求中携带的数据（obj格式），params：get请求中携带的数据（就是在浏览器地址xx/xx/xx后面?XX=oo&XX=oo这部分数据，obj格式）

4、传过来的参数一定要在（query）=>{ }括号中引入，函数里面才能用

eg:

import request from '../axios/axios';

// 获取登录页数据接口

export const getApplicInfo = (query) =>{

    return request({

        url:'baseURL后面的内容',

        method:'get',

        params:query

    })

}

// 登录页接口

export const getLogin = (query) =>{

    return request({

        url:'',

        method:'post',

        data:query

    })

}

//上传图片

export const uploadPhoto = (query) =>{

    return request({

        url:'/openApi/upload.do',

        method: 'post',

        headers:{

            'Content-Type':'multipart/form-data'

        },

        data: query

    })

}

7、页面中使用

import {getApplicInfo,getLogin} from '@/api/service/login'

getApplicInfo(query)

        .then(res => {

        })

        .catch(res => {

             console.log("网络开小差了，没有获取到图片哦");

        })