前端学习vue：10.Axios网络请求封装

在日常应用过程中，一个项目中的网络请求会很多，此时一般采取的方案是将网络请求封装起来。

第一步先安装网络请求库 Axios，在项目目录下执行命令行:

PS C:\Users\Administrator\vue-demo1> npm install -save axios 

先创建一个utils文件夹，里面创建一个文件 request.js 代码如下：

import axios from "axios";

import { error, info } from "console";

import { config } from "process";

import querystring from "querystring"

// 参考文档： https://www.kancloud.cn/yunye/axios/234845

// 错误码信息处理

const errorHandle = (status,info) => {

    switch(status){

        case 400:

            console.log("语义有误");

            break;

        case 401:

            console.log("服务器认证失败");

            break;            

        // ....

    }

}

const instance = axios.create({

    // 网络请求的公共配置

    timeout:5000

})

// 拦截器最常用

// 发送数据之前

instance.interceptors.request.use(

    config =>{

        if (config.methods === "post"){

            config.data = querystring.stringify(config.data)

        }

        // config: 包含着网络请求的所有信息

        return config;

    },

    error =>{

        return Promise.reject(error)

    }

)

// 获取数据之前

instance.interceptors.response.use(

    response =>{

        return response.staus === 200 ? Promise.resolve(response) : Promise.reject(response)

    },

    error =>{

        const { response } = error;

        // 错误的处理才是我们需要最关注的

        errorHandle(error.status,error.info);

       

    }

)

 

export default instance;

然后在src下再创建个文件夹名字为api，在此文件夹下创建index.js和path.js。

index.js里代码如下:

import axios from "axios";

import path from "./path"

const api = {

    // 诚品详情地址

    getChengpin(){

        return axios.get(path.baseUrl + path.chengpin)

    }

}

export default api

然后是path.js 代码如下:

// 存放所有的网络请求路径

const base = {

    baseUrl:"http://iwenwiki.com",

    chengpin:"/api/blueberrypai/getChengpinDetails.php",

}

最后是在.vue里去做引入和请求调用：

最后在检查里的控制台查看请求结果