axios之http请求

利用axios发请求

/**
 * 二次封装
 */

import axios from 'axios';
import store from '../store'
import {message} from 'antd';

const request = axios.create({
    baseURL:'http://112.74.111.183:8888/api',
    withCredentials:true  // 请求浏览器cookie允许
})

// 请求拦截：在请求发出去之前进行的操作
// 应用：统一发送固定参数，loading
// 
request.interceptors.request.use(function(config){
    const state = store.getState();
    config.headers.authorization = state.user.Authorization;
    
    message.loading('努力加载中....');
    return config;
},function(error){
    return Promise.reject(error)
})
// 响应拦截：数据返回前进行的操作
// 应用：格式化数据，关闭loading
request.interceptors.response.use(function(response){
    return response
},function(error){
    return Promise.reject(error)
})


export async function get(url,data,config={}){
    const {data:result} = await request({
        ...config,
        url,
        method:'get',
        params:data
    })
    return result;
}

export async function post(url,data,config={}){
    
    const {data:result} = await request({
        ...config,
        url,
        method:'post',
        data
    })

    return result;
}

export async function put(url,data,config={}){
    const {data:result} = await request.put(url,data,config);

    return result;
}


export async function remove(url,data,config={}){
    const {data:result} = await request.delete(url,{
        ...config,
        params:data
    });

    return result;
}

export default {
    get,
    post,
    put,
    remove,
    // patch
};

拦截器

可以在请求拦截器添加判断是否登录添加token

 // 判断是否只有登录才可以获取token值
  if(config.url !== 'login'){
    const AUTH_TOKEN = localStorage.getItem('token')
    config.headers.Authorization = AUTH_TOKEN
  }

import axios from 'axios';

import {Toast} from 'Vant';
import qs from 'qs';
import {getToken,getAgentId} from '@/utils/util'
import config from '@/config'

const URL = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
/**
 * 创建axios实例
 * @type {AxiosInstance}
 */
axios.defaults.timeout = 10000;
axios.defaults.baseURL = URL; //填写域名
/**
 * 请求参数处理
 */
axios.interceptors.request.use((config) => {
    // let user = JSON.parse(sessionStorage.getItem('user'));
        const agentId = getAgentId();
        if(config.data && agentId){
            config.data.agentId = agentId
        }
        if(config.params && agentId){
            config.params.agentId = agentId
        }
        config.method === 'post'
            ? config.data = qs.stringify({...config.data})
            : config.params = {...config.params}
         const token = getToken()
        if (token) {
            config.headers['Authorization'] = 'Bearer ' + token
        }
        Toast.loading({
                message: '加载中...',
                forbidClick: true,
                overlay:false,
                duration:0
            });

        return config
    }
)


//响应拦截器即异常处理
axios.interceptors.response.use(
    (response) => {
        Toast.clear();
        if (response.data.code === 0) {
            // 服务端定义的响应code码为0时请求成功
            // 使用Promise.resolve 正常响应
            return Promise.resolve(response.data)
        } else {
            // 使用Promise.reject 响应
            Toast({message: response.data.message, position: 'bottom', duration: 1000});
            return Promise.reject(response.data)
        }
    }, error => {
        let message = ''
        console.log("请求错误-------------",error);
        if (error && error.response) {
            switch (error.response.status) {
                case 401:
                    // location.reload()
                    if(error.response.data.code === 2012){

                        Toast({message: '请重新登录', position: 'bottom', duration: 1000});
                        try{
                            window.native.toLogin();
                        }catch (e) {

                        }
                    }
                    return
                case 403 || 400:
                    message = error.response.data.path + ',' + error.response.data.message
                    break
                case 502:
                    message = '连接服务器失败'
                    break
                default:
                    message = error.response.data.message ? error.response.data.message : '服务器错误'
                    break
            }
            Toast({message: message, position: 'bottom', duration: 1000});
            // 请求错误处理
            return Promise.reject(error)
        } else {
            message = '连接服务器失败'
            Toast({message: message, position: 'bottom', duration: 1000});
            return Promise.reject(error)
        }
    }
)

export default axios