封装axios

axios常用方式：
axios({
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },// `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默认的

);

2、创建axios实例

请求公共部分
const instance =axios.create({
  baseUrl:'http://www.com',
  timeout:1000,
})
不同的部分将配置作为参数传递到instance中
instance(config)
config:{url,data||params,method}
instance({url,data||params,method})

3、基础封装

export function request(config){
  //创建axios实例
  const instance = axios.create({
    baseUrl:' ',
    timeOut:1000,
    
  })
  // 添加请求拦截器
  instance .interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
  });

  // 添加响应拦截器
  instance .interceptors.response.use(function (response) {
      // 对响应数据做点什么
      return response;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
  return instance(config)
}

　4、使用

import {request} from '@/request'
//get请求?param=1&&..
export function ExampleInter (data){
　　return request({
    method:'get',
    params:data,
    url:''
})
}
//get请求url/1/2
export function ExampleInter (data){
return request({
    method:'get',
    url:`url/${data.id}/${data.ids}`
})
}
//post请求
export function ExampleInter (data){
 return request({
   method:'post',
    data,
    url:''
})
}

　　

 

 

import axios from 'axios'
import Qs from 'qs'
import store from '@/vuex/store'
import Router from '@/router/index'
import { Message } from 'element-ui';
export function request(config){
    // console.log("baseUrl",baseUrl.uploadUrl);
    const instance =axios.create({
        baseURL:baseUrl.uploadUrl,
        timeout:5000,
        transformRequest: [function (data) {
        // 对 data 进行任意转换处理
        return Qs.stringify(data)
      }],
    })
    instance.interceptors.request.use((config)=>{
        // console.log("config",config);
        let token=store.state.token?store.state.token:sessionStorage['token'];
        if (token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.token = token;
            // console.log('interceptors config=',config)
        }
        // this.$store.commit('')
        //一般在这之前对config做处理
        return config;//config为请求配置，须返回config
    },function(error){})
    // console.log('dddd',store.state.isShowMessage)
    instance.interceptors.response.use((response)=>{

        // console.log("response",response)
        // console.log('dddd',store.state.isShowMessage)
        if(response.data.errcode=="500405"){
            Router.push('/login');
        }
        // console.log(re)
        if(store.state.isShowMessage&&!response.data.ret){
            console.log("response error");
            store.commit('setIsShowMessage',false);
            Message.error(
                {
                    showClose: true,
                    message: response.data.errmsg,
                    type: 'error',
                    onClose:function(){
                        store.commit('setIsShowMessage',true)
                    }
                }
            )
            return false;
        }
        return response
    },function(error){
        console.log("error",error)
    })

    return instance(config);
}