Vue简单封装axios网络请求的方法

目录

• Vue简单封装axios网络请求
• 一、utils下的httpUtils.js:
• 二、/api下的path.js:
• 三、/api下的index.js:
• 四、组件中引入并请求：

Vue简单封装axios网络请求

一、utils下的httpUtils.js:

import axios from 'axios';
import querystring from 'querystring';

const errorHandler = (status, info) => {
    switch(status){
        case 400:
            console.log("400 - 语义错误");
            break;
        case 401:
            console.log("401 - 服务器认证失败");
            break;
        case 403:
            console.log("403 - 服务器拒绝访问");
            break;
        case 404:
            console.log("404 - 地址错误");
            break;
        case 500:
            console.log("500 - 服务器遇到意外");
            break;
        case 502:
            console.log("502 - 服务器无响应");
            break;
        default:
            console.log(info);
            break;
    }
}

// 创建axios实例
const instance = axios.create({
    // 放置网络请求的公共参数
    timeout:5000, // 5s后超时
})

// 拦截器最常用
// 1、发送请求之前
instance.interceptors.request.use(
    config =>{
        if (config.method === 'post'){
            config.data = querystring.stringify(config.data)
        }

        // config中存在网络请求的所有信息
        return config;
    },
    error =>{
        return Promise.reject(error)
    }
)
// 2、接收响应后
instance.interceptors.response.use(
    response => {
        // 三目运算根据状态码来判断接收数据还是拒绝数据
        return response.status === 200 ? Promise.resolve(response):Promise.reject(response)
    },
    error=>{
        const { response } = error;
        // 自定义方法来输出异常信息
        errorHandler(response.status,response.info)
    }
)

// 导出
export default instance;

二、/api下的path.js:

const base = {
    // 公共路径
    baseUrl : "http://iwenwiki.com",
    chengpin : "/api/blueberrypai/getChengpinDetails.php",
    login : "/api/blueberrypai/login.php"
}

export default base;

三、/api下的index.js:

import axios from "../utils/httpUtils";
import path from "./path"

const api = {
    // 成品地址
    getChengpin(){
        return axios.get(path.baseUrl+path.chengpin)
    }
}

export default api;

四、组件中引入并请求：

查看效果：

请求成功

到此这篇关于Vue简单封装axios网络请求的文章就介绍到这了,更多相关Vue封装axios网络请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！