【VUE】6、VUE项目中引入axios

1、初识 axios

Axios，是一个基于 promise 的网络请求库，作用于 node.js 和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequest。

• 主要特点：

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

2、安装 axios

• 1、安装 axios

npm install axios

• 2、挂载 axios
  在 main.js 文件中，添加如下内容：

import axios from 'axios'

Vue.prototype.$http= axios

我们便可以通过 this.$http 的方式来发起请求了

3、配置网络代理

const {defineConfig} = require('@vue/cli-service')

module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        // 指定使用的ip地址，默认为localhost，如果使用'0.0.0.0'则可以被外部访问
        host: '0.0.0.0',
        // 指定服务监听的端口号
        port: 9527,
        // 代理
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: 'http://localhost:8080',
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    }
})

其中，process.env.VUE_APP_BASE_API 为我们在多环境配置文件中配置的请求路径，例如，.env.development 文件：

# Asurplus管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'

则我们发出的请求路径为：

http://localhost:9527/dev-api/xxx

4、使用 axios

httpTest() {
  this.$http.get(process.env.VUE_APP_BASE_API + '/test').then(res => {
    console.log(res)
  })
}

得到的响应：

{
    "data":{
        "msg":"操作成功",
        "code":200,
        "data":"this is data"
    },
    "status":200,
    "statusText":"OK",
    "headers":{
        "connection":"close",
        "content-encoding":"gzip",
        "content-type":"application/json;charset=UTF-8",
        "date":"Mon, 03 Apr 2023 06:47:10 GMT",
        "transfer-encoding":"chunked",
        "vary":"Accept-Encoding",
        "x-powered-by":"Express"
    },
    "config":{
        "transitional":{
            "silentJSONParsing":true,
            "forcedJSONParsing":true,
            "clarifyTimeoutError":false
        },
        "adapter":[
            "xhr",
            "http"
        ],
        "transformRequest":[
            null
        ],
        "transformResponse":[
            null
        ],
        "timeout":0,
        "xsrfCookieName":"XSRF-TOKEN",
        "xsrfHeaderName":"X-XSRF-TOKEN",
        "maxContentLength":-1,
        "maxBodyLength":-1,
        "env":{

        },
        "headers":{
            "Accept":"application/json, text/plain, */*"
        },
        "method":"get",
        "url":"/dev-api/test"
    },
    "request":{

    }
}

可以看到，包括一些网络的响应状态及信息也一起拿到了，但是这样我们每次都需要判断 httpStatus 是否为 200，才能进行正常的业务逻辑处理，非常繁琐

5、配置请求拦截器和响应拦截器

import axios from 'axios'
import {Message} from 'element-ui'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_API,
    // 超时
    timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
        let url = config.url + '?';
        for (const propName of Object.keys(config.params)) {
            const value = config.params[propName];
            const part = encodeURIComponent(propName) + "=";
            if (value !== null && typeof (value) !== "undefined") {
                if (typeof value === 'object') {
                    for (const key of Object.keys(value)) {
                        let params = propName + '[' + key + ']';
                        const subPart = encodeURIComponent(params) + "=";
                        url += subPart + encodeURIComponent(value[key]) + "&";
                    }
                } else {
                    url += part + encodeURIComponent(value) + "&";
                }
            }
        }
        url = url.slice(0, -1);
        config.params = {};
        config.url = url;
    }
    return config
}, error => {
    Promise.reject(error)
})

// response拦截器
service.interceptors.response.use(res => {
        // 未设置状态码则默认成功状态
        const code = res.data.code || 200;
        // 获取错误信息
        const msg = res.data.msg
        if (200 !== code) {
            Message({
                message: msg,
                type: 'error'
            })
            return Promise.reject(new Error(msg))
        }
        // 返回响应信息
        else {
            return res.data
        }
    },
    error => {
        let {message} = error;
        if (message === "Network Error") {
            message = "后端接口连接异常";
        } else if (message.includes("timeout")) {
            message = "系统接口请求超时";
        } else if (message.includes("Request failed with status code")) {
            message = "系统接口" + message.substr(message.length - 3) + "异常";
        }
        Message({
            message: message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service

• 1、请求拦截器

1、默认请求头内容：Content-Type=application/json;charset=utf-8，如需要传递 token 等身份验证信息可在请求拦截器中加入
2、配置了默认请求超时时间：10s
3、get 请求如果传递了 params 参数，则将参数按照 ?key=value&key1=value1 的方式拼接在请求地址上

• 2、响应拦截器

1、默认以返回的 code = 200 为成功响应，返回响应信息中的 data 对象
2、请求业务层面的错误响应则直接提示业务响应对象中的 msg 信息
3、请求网络层面的错误响应根据错误类型提示响应的提示信息

6、封装请求

• 1、test.js

import request from '@/utils/request'

export function test(data) {
    return request({
        url: '/test',
        method: 'post',
        data: data
    })
}

• 2、发起请求

引入我们刚刚配置的请求拦截器和响应拦截器，data 为我们需要传递的参数，在组件中使用：

import {test} from "@/api/test";

methods: {
  httpTest() {
    test(this.data).then(res => {
      console.log(res)
    })
  }
}

得到的响应：

{
    "msg":"操作成功",
    "code":200,
    "data":"this is data"
}

如您在阅读中发现不足，欢迎留言！！！