axios封装使用

1、新建一个文件夹api
2、api中新建一个，http.js文件，封装axios
http.js

import axios from 'axios'
import qs from 'qs'
// import { Router, Route, hashHistory } from 'react-router-dom'

// create an axios instance
const service = axios.create({
    baseURL: window.config.baseURL, // api的base_url
    timeout: 20000000000, // request timeout
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
    },
    // withCredentials: true,// 是否允许带cookie这些
    // credentials: 'same-origin',
})

// POST传参序列化
service.interceptors.request.use((config) => {
    // if (config.method === 'post') {
    //     if (!config.isFormData) {
    //         config.data = qs.stringify(config.data)
    //     }
    // }
    if (localStorage.getItem('token')) {
        config.headers.token = localStorage.getItem('token')
    }
    //debugger
    return config
}, (error) => {
    return Promise.reject(error)
})

// code状态码200判断
service.interceptors.response.use((res) => {
    // console.dir(res.status);
    if (res.status !== 200) {
        return Promise.reject(res)
    }
    return res
}, (error) => {
    // 网络异常
    // console.dir(JSON.parse(JSON.stringify(error)).response.status);
    return Promise.reject(error)
})

export default service

3、新建 my.js 文件用于调用接口，抛出返回值，返回一个个函数
my.js

import request from './http';

// 获取
export function getNums(data) {
    return request({
        url: `xxx/xxx/xxx`,
        method: 'GET'
    })
}

4、调用的时候，引入my.js对应函数
5、执行方法，后面跟 then/catch，写自己的操作

// 引入
import { getNums} from 'api/mynews';

...
//使用
// data表示调用接口时要传的参数
getNums(data)
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})