What is the use of vue encapsulating axios?

Vue encapsulating axios can improve code quality and make use more convenient. The API of axios is very friendly, and developers can easily use it directly in the project; however, as the project scale increases, every time an HTTP request is initiated, it is necessary to write operations such as setting timeout, setting request headers, error handling, etc. . This kind of duplication of work not only wastes time, but also makes the code redundant and difficult to maintain; in order to improve the quality of our code, we should encapsulate axios twice in the project before using it, which can make it more convenient to use.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

What is axios

axios is a lightweight HTTP client

based on the XMLHttpRequest service to perform HTTP requests. Supports rich configuration, supports Promise, supports browser side and Node.js side. Since Vue2.0, Youda announced that it will cancel the official recommendation of vue-resource and recommend axios instead. Now axios has become the first choice for most Vue developers

##Why encapsulate

The API of axios is very friendly and you can easily use it directly in your project.

However, as the scale of the project increases, every time an HTTP request is initiated, it is necessary to perform operations such as setting the timeout, setting the request header, determining which request address to use based on the project environment, error handling, etc. Needing to write it again

This kind of repetitive work not only wastes time, but also makes the code redundant and difficult to maintain. In order to improve the quality of our code, we should encapsulate axios twice in the project and then use

For example:

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他请求配置...}).then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);});

If each page sends a similar request, you must write one The configuration and error handling of the heap are too cumbersome

At this time we need to re-encapsulate axios to make it more convenient to use

How to encapsulate

While encapsulating, you need to negotiate some agreements with the backend, request headers, status codes, request timeouts...

Set interface requests Prefix: Depending on the development, testing, and production environments, the prefix needs to be distinguished

Request header: To implement some specific services, some parameters must be carried before the request can be made (for example: membership service)

Status code: According to the different status returned by the interface, different services are executed. This needs to be agreed with the backend.

Request method: Re-encapsulate according to get, post and other methods, which is more convenient to use.

Request interceptor: Determine which requests can access based on the request header setting

Response interceptor: This block determines the execution of different services based on the status code returned by the backend`

Set the interface request prefix

Use node environment variables to make judgments to distinguish between development, testing and production environments

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

For local debugging Sometimes, you also need to configure devServer in the vue.config.js file to implement proxy forwarding, so as to achieve cross-domain

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

Set the request header and timeout period

In most cases Below, the request headers are fixed. Only in a few cases, some special request headers are needed. Here, the universal request headers are used as the basic configuration. When a special request header is required, pass the special request header as a parameter to overwrite the basic configuration

const service = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
	  headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

Encapsulated request method

First introduce the encapsulated method, and then The called interface is re-encapsulated into a method and exposed

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post
// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

Put the encapsulated method in an api.js file

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

You can call it directly in the page

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

This way The api can be managed uniformly. In the future, maintenance and modification only need to be done in the api.js file.

Request interceptor

The request interceptor can be in each Adding a token to each request makes maintenance easier after unified processing.

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

Response interceptor

The response interceptor can do a layer after receiving the response. Operations, such as determining login status and authorization based on status code

// 响应拦截器
axios.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
    return Promise.reject(error.response)
  }
})

Summary

Encapsulation is a very meaningful method in programming. Simple axios encapsulation can allow us to You can appreciate its charm

There is no absolute standard for packaging axios. As long as your packaging can meet the needs of your project and is easy to use, it is a good packaging solution

[ Related recommendations:

vuejs video tutorial, web front-end development】

The above is the detailed content of What is the use of vue encapsulating axios?. For more information, please follow other related articles on the PHP Chinese website!