Vue使用axios发送请求_vue2配置axios请求本机

目录

一、前言

二、axios前期配置

三、封装请求和响应

四、封装公共的api

四、调用请求

---

一、前言

在做vue中大型项目的时候，官方推荐使用axios，但是原生的axios可能对项目的适配不友好，所以，在工程开始的来封装一下axios，保持全项目数据处理的统一性。此文主要讲在vue-cil项目中如何封装axios，封装请求，封装公共的api，页面如何调用请求。

二、axios前期配置

1、下载axios

npm i axios -S

2、在main.js里面导入axios

//main.js
import axios from "axios";

3、 在vue.config.js中添加代理配置，进行跨域配置也是在这。（适用于vue2，vue3自行测试）

const { defineConfig } = require('@vue/cli-service')
 
 
module.exports={
  devServer:{
    host:'localhost',
    port:8081,
    proxy: {
      '/':{
        //websocket
        ws:false,
        //目标地址
        target:'http://localhost:8080',
        //发送请求头host会被设置target
        changeOrigin:true,
        //不重写请求地址
        pathRewrite:{
          '^/':'/'
        }
      }
 
}
  }
}

三、封装请求和响应

1、新建一个untils文件夹，并创建一个request.js

2、在request.js中写入以下代码，对请求与响应进行封装

import axios from 'axios';
 
// 创建 Axios 实例
const request = axios.create({
    baseURL: '',
    timeout: 5000
});
 
// 请求拦截器
request.interceptors.request.use(config => {
    //设置请求内容格式
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
/*    //设置token
    let user=localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):null
    if(user){
        config.headers['token'] = user.token;  // 设置请求头
    }
    console.log(user)
 
 */
    return config;
}, error => {
    return Promise.reject(error);
});
 
// 响应拦截器
request.interceptors.response.use(
    response => {
        let res = response.data;
        if (response.config.responseType === 'blob') {
            return res;
        }
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res;
        }
        return res;
    },
    error => {
        console.log('err' + error);
        return Promise.reject(error);
    }
);
 
 
export default request;

四、封装公共的api

我们常规的请求有get、post、delete、put。如果我们封装这类公共的api，那我们每次在发送请求的格式就会如下

//以要请求后端地址为http://localhost:8080/root/login为例
request.get(http://localhost:8080/root/login,param).then(resp=>{
if(resp.data.message==="success"){
    ......   //对响应内容的处理
    ......
}
})

这时，如果每个请求都这样写，就会麻烦很多，所以我们可以对这类公共的api进行封装。可以将代码放在request.js的下面。代码如下

// 封装不同类型请求
export const postRequest = (url, params) => {
    return request({
        method: 'post',
        url: `${url}`,
        data: params
    });
};
 
export const getRequest = (url) => {
    return request({
        method: 'get',
        url: `${url}`
    });
};
 
export const deleteRequest = (url, params) => {
    return request({
        method: 'delete',
        url: `${url}`,
        data: params
    });
};
 
export const putRequest = (url, params) => {
    return request({
        method: 'put',
        url: `${url}`,
        data: params
    });
};

四、调用请求

通过对上面的封装，大大简化了我们的请求操作，现在的发送请求代码格式如下

//以要请求后端地址为http://localhost:8080/root/login为例
 
postRequest('/root/login',this.login).then(resp=>{
              if(resp.message==="success"){
                    .....  //对响应内容进行处理
                })
 
 
//url地址直接为/root/login是因为在第一步代理配置那里将http://localhost:8080转化成/了