【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 文件中，添加如下内容：

importaxios 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、配置请求拦截器和响应拦截器

importaxios 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'})returnPromise.reject(newError(msg))}// 返回响应信息else{return res.data
        }},
    error =>{
        let {message}= error;if(message ==="Network Error"){
            message ="后端接口连接异常";}elseif(message.includes("timeout")){
            message ="系统接口请求超时";}elseif(message.includes("Request failed with status code")){
            message ="系统接口"+ message.substr(message.length -3)+"异常";}Message({
            message: message,
            type:'error',
            duration:5*1000})returnPromise.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

importrequest from '@/utils/request'

export function test(data){returnrequest({
        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"}

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