axios的封装

1 封装的axios.js放在utils下面,utils是配置文件(baseURL表示请求url公共部分)

（一） 
1 import axios from 'axios'
import qs from 'qs'
axios.defaults.baseURL = process.env.NODE_ENV==='production'?'/.../api':'/'
axios.defaults.timeout= 20000;
axios.defaults.headers={'content-Type':'application/x-www-form-urlencoded;charset=UTF-8'};

const service=axios.create();

service.interceptors.request.use(function (config) {
  config.method === 'POST' ?
    config.data = qs.stringify({...config.data}) :
    config.params = ({...config.params});
  return config
},error => {

});

// 拦截器，拦截请求之后，数据返回之前
service.interceptors.response.use(
  respones => {
    // console.log(respones)
    return respones.data
  },
  error => {
    Promise.reject(error)
  }
);
export default service

 （二）

import axios from 'axios'
import qs from 'qs'
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/qdwe' : '/api'
axios.defaults.timeout = 20000
const service = axios.create({
    retry: 2 ,// 请求次数,
    retryInterval: 1000 // 请求超时后，1s再次请求
})

service.interceptors.request.use(function (config) {
    // 请求之前的处理,token,(js-cookie),store处理
    config.method === 'POST'
        ? config.data = qs.stringify({...config.data})
        : config.params = {...config.params};
    config.headers['Content-type'] = 'application/x-www-form-urlencoded;chartset=UTF-8'
    return config
}, function (error) {
    return Promise.reject(error)
})

service.interceptors.response.use(
    response => {

        if (response.status === 200) {
            return response.data
        } else if (response.status === 500) {
            //
            //console.log('0000')
        }
    } ,
    error => {
        //console.log(error)
        //  请求超时,处理
        const config = error.config
        if(!config || !config.retry) return Promise.reject(error)
        // 重新请求次数
        config.retryCount = config.retryCount || 0
        // 请求次数是否上限
        if(config.retryCount >= config.retry){
            return Promise.reject(error)
        }
        config.retryCount += 1
        // 重新发起请求
        const back = new Promise(function(resolve){
            setTimeout(() => {
                resolve()
            },config.retryInterval || 1)
        })
        // 返回axios实体
        return back.then(() => {
            return service(config)
        })
    }
)

export default service

2 新建文件夹request,下一级新建api.js文件 (用于全局使用)

import service from  '../utils/axios'
// POST请求对的参数放在data,GET请求放在params
export const info = (id) =>{
  return service({
    url: '  ',
    method: 'GET',
    params:{
      prisonsId : id
    }
  })
}

3 需要调用接口的页面

<script>
import { info} from "../request/api";

data(){
return{
  kssData()
}
}
 created(){
      info(this.pageIndex).then(res => {
        // console.log('res',res);
        this.kssData = res.data
      }).catch(err => {
      });
}
</script>