vue项目中使用axios时的请求拦截和封装

vue项目中使用axios时的请求拦截和封装

1、在src下创建目录utils，在utils下新建文件request.js

//request.js

import axios from 'axios';
import { Message,Loading } from 'element-ui';
const service = axios.create({
    baseURL:process.env.BASE_API,
    timeout:10000
})
let loadingInstance;
let options = {  //loading 的配置参数
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
}
//请求拦截器
service.interceptors.request.use(function(config){
    loadingInstance = Loading.service(options);//显示loading
    config.data = config.data;  //根据后端数据格式，可做相应的数据转换 JSON.stringify() 或 qs.stringify()
    //设置header的配置信息，跟后端配合设置
    // config.headers = {
    //     'Content-Type':'application/x-www-form-urlencoded'
    // }

    //设置 token ,根据需要设置
    // const token = getCookie('token');
    // if(token){
    //     config.params = {'token':token};
    //     config.headers.token = token;
    // }
    return config;
},function(error){
    loadingInstance.close();  //关闭loading
    return Promise.reject(error)
})

//响应拦截器
service.interceptors.response.use(function(response){
    loadingInstance.close();  //关闭loading
    return response;
},function(error){
    loadingInstance.close();  //关闭loading
    if(error || error.response){
        switch(error.response.status){
            case 400:
                error.message = '错误请求';
                break;
            case 401:
                error.message = '未授权，请重新登录'
                break;
            case 403:
                error.message = '拒绝访问'
                break;
            case 404:
                error.message = '请求错误,未找到该资源';
                window.location.href = '/notFound';
                break;
            case 405:
                error.message = '请求方法未允许';
                break;
            case 408:
                error.message = '请求超时';
                break;
            case 500:
                error.message = '服务器端出错';
                break;
            case 501:
                error.message = '网络未实现';
                break;
            case 502:
                error.message = '网络错误';
                break;
            case 503:
                error.message = '服务不可用';
                break;
            case 504:
                error.message = '网络超时';
                break;
            case 505:
                error.message = 'http版本不支持该请求';
                break;
            default:
                error.message = `连接错误${error.response.status}`
        }
    }else{
        if(JSON.stringify(error).includes('timeout')){
            Message.error('服务器响应超时，请刷新当前页')
        }
        error.message('连接服务器失败')
    }

    Message.error(error.message)
    return Promise.resolve(error.response)
})

export default service

2、在 utils 目录下新建文件 http.js

//http.js

import request from './request';
const http = {
    get(url,params){
        const config = {
            method:'get',
            url:url
        }
        if(params) config.params = params;
        return request(config)
    },
    post(url,params){
        const config = {
            method:'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method:'put',
            url:url
        }
        if(params) config.params = params;
        return request(config)
    },
    delete(url,params){
        const config = {
            method:'delete',
            url:url
        }
        if(params) config.params = params;
        return request(config)
    }
}

export default http

3、在 src 目录下新建一个api 目录，并在api目录下新建文件 api.js

// api.js

import http from '../utils/http';
let resquest = ''; //http://10.0.0.3:8080/getList.json  //请求本地文件
let postUrl ="/postURL/info/supplement"; // http://10.0.0.3:8080/postURL/info/supplement  //跨域--代理请求

//get 请求
export function getListAPI(params){
    return http.get(`${resquest}/getList.json`,params)
}

//post 请求
export function postFormAPI(params){
    return http.post(`${postUrl}`,params)
}

//put 请求
export function putSomeAPI(params){
    return http.put(`${resquest}/putSome.json`,params)
}

//delete 请求
export function deleteListAPI(params){
    return http.delete(`${resquest}/deleteList.json`,params)
}

4、引入并使用api请求接口

<script>
import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api'    //引入api
export default{
    data(){
        return{

        }
    },
    methods:{
        getList(){
            //模拟的数据
            let data = {
                name:'lisi'
            }
            getListAPI(data).then(res =>{
                console.log(res)
            }).catch(err =>{
                console.log(err)
            })
        },
        postForm(){
            //模拟的数据
            let data = {
                username:"",
                telnum:"",
            }
            postFormAPI(data).then(res =>{
                console.log(res)
            }).catch(err =>{
                console.log(err)
            })
        }
    }
}
</script>

5、跨域代理设置—在当前项目下，新建一个 vue.config.js 文件，内容如下：

const webpack = require('webpack');
module.exports = {
    assetsDir: './',
    publicPath: '/',
    outputDir: './dist',
    runtimeCompiler: undefined,
    productionSourceMap: false,
    filenameHashing: false,
    parallel: undefined,
    css: {
        extract: false
    },
    devServer: {
        overlay: { // 让浏览器 overlay 同时显示警告和错误
          warnings: true,
          errors: true
        },
        host: "10.0.0.3",
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: false, //配置后自动启动浏览器
        hotOnly: true, // 热更新
        // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
        proxy: { //配置多个代理
            "postURL": {
                target: "http://218.17.135.100:8089",
                changeOrigin: true,
                //ws: true,//websocket支持
                secure: false,
                pathRewrite: {
                    "^/postURL": "/"
                }
            }
        }
    }

}

原文地址：https://www.cnblogs.com/zyfenblog/p/13865169.html