What is the method of encapsulating Axios requests in vue3 and using it in components?

1. Create a folder to store the encapsulated js

I created it in src/request/axios.js

##2. The encapsulation code is as follows

Copy the following code directly into request.js, encapsulating get and post requests.

What you need to configure yourself is: your own request address, whether the tokenKey is token, and change it to save it locally. Token name, can look at the comments in the code, it is easy to understand.

/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
import axios from 'axios';
import QS from 'qs';
import router from '../router/index'
//qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
//  let protocol = window.location.protocol; //协议
//  let host = window.location.host; //主机
//  axios.defaults.baseURL = protocol + "//" + host;
axios.defaults.baseURL = 'http://localhost:8888'
 
axios.interceptors.request.use( //响应拦截
        async config => {
            // 每次发送请求之前判断vuex中是否存在token        
            // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
            // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
            config.headers.token = sessionStorage.getItem('token')
            return config;
        },
        error => {
            return Promise.error(error);
        })
    // 响应拦截器
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response); //进行中        
        } else {
            return Promise.reject(response); //失败       
        }
    },
    // 服务器状态码不是200的情况    
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录                
                // 未登录则跳转登录页面，并携带当前页面的路径                
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:
                    break
                    // 403 token过期                
                    // 登录过期对用户进行提示                
                    // 清除本地token和清空vuex中token对象                
                    // 跳转登录页面                
                case 403:
                    sessionStorage.clear()
                    router.push('/login')
                    break
                    // 404请求不存在                
                case 404:
                    break;
                    // 其他错误，直接抛出错误提示                
                default:
            }
            return Promise.reject(error.response);
        }
    }
);
/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
const $get = (url, params) => {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                    params: params,
                })
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    }
    /** 
     * post方法，对应post请求 
     * @param {String} url [请求的url地址] 
     * @param {Object} params [请求时携带的参数] 
     */
const $post = (url, params) => {
        return new Promise((resolve, reject) => {
            axios.post(url, QS.stringify(params)) //是将对象 序列化成URL的形式，以&进行拼接   
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    }
    //下面是vue3必须加的，vue2不需要，只需要暴露出去get，post方法就可以
export default {
    install: (app) => {
        app.config.globalProperties['$get'] = $get;
        app.config.globalProperties['$post'] = $post;
        app.config.globalProperties['$axios'] = axios;
    }
}

3. Configuration

In main.js, introduce the js we encapsulated in the first step, and then use()

//引入封装Axios请求
import Axios from './request/axios';
 
const app = createApp(App).use(VueAxios, axios).use(ElementPlus).use(router).use(Axios)

4. Use it in the required components

Here comes the point, the packaging is finished, in the final analysis I have to use it. Import

getCurrentInstance in the component. Add the following code.

import {  getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

  function logout(){
    proxy.$post("/sysStaff/logout",{}).then((response)=>{
      console.log(response)
      if(response.code == 200){
        sessionStorage.clear();
        router.push('/')
        ElMessage({
          message: '退出成功',
          type: 'success',
        })
      }
    })
  }

When calling, there are two parameters. The first parameter is the path, and the second parameter is an object, in which the parameters to be sent can be written, such as: username: shuaibi, password :123456.

Supplement: Solve the cross-domain problem CORS through specific configuration

Install the third-party package webpack-dev-server

If you do not install it, there is no devServer configuration item, you must install it

npm install webpack-dev-server

Write the following configuration in the root directory vue.config.js

module.exports = {
  // 关闭语法检查
  lintOnSave: false,
  // 解决axios发送请求时的跨域问题,不做配置会报错如下↓↓↓↓
  // ccess to XMLHttpRequest at 'http://127.0.0.1:23456/webPage/home_notice.post' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  devServer: {
    // https: false,
    proxy: {
      //  /api 表示拦截以/api开头的请求路径
      "/webPage": {
        target: "http://127.0.0.1:23456/", // 跨域的域名（不需要重写路径）
        ws: false, // 是否开启websockede
        changeOrigin: true, // 是否开启跨域
        // pathRewrite: {
        //   "^/webPage": "",
        // },
      },
    },
  },
};

If the browser requests a web page of one domain name, but needs to obtain the resources of another domain name, as long as these two domain names, ports or protocols If any one of them is different, it is considered to be cross-domain. There is no detailed explanation here. If you want to know more, you can check the information.

1. The devServer configuration item can enable a reverse proxy to solve cross-domain problems. All previous address splicing can be obtained

   /webPage/cooperater.post... When the request is finally initiated, if pathRewrite is not written, it means searching for /webPage and splicing the address in the target before it. Most will initiate a request to http://127.0.0.1:23456/webPage/cooperater.post.
   

##pathRewrite: {"^/webPage": "***",}, indicating that route rewriting will replace /webPage with ***

The above is the detailed content of What is the method of encapsulating Axios requests in vue3 and using it in components?. For more information, please follow other related articles on the PHP Chinese website!