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"
              }
              

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

               
               装饰公司十大排名  大型网站建设平台  网站制作新手教程  新安人才网手机触屏版  电子商务专业网站设计  唐山网站建设方案托管