vue中使用axios

axios

axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

axios本质上也是对原生XHR的封装，只不过是promise的实现版本

用来向后端发送http请求，获取后端发送的数据

axios安装 

npm install --save axios

或者

使用vue-cli创建项目时选择axios

封装axios 

对axios进行二次封装主要是为了设置请求拦截器（在请求发出之前做一些事情）和响应拦截器（在数据返回之后，做一些事情）

在src项目中建立request文件夹 ，在request文件夹下建立index.js

//对于axios进行二次封装
import axios from "axios";

//创建axios实例
let requests = axios.create({
  //基础路径
  baseURL: "localhost:8000/",
  //请求不能超过5S
  timeout: 5000,
});
 
//请求拦截器（可以在请求发出去之前，做一些事情）
requests.interceptors.request.use((config) => {
  return config;
});
 

//响应拦截器（在数据返回之后，做一些事情）
requests.interceptors.response.use(
  (res) => {
    //响应成功
    if（res.code == 401）{
        return "xxxx";
    }
    return res.data;
  },
   // 响应失败
  (err) => {
      return "请求失败"
  }
);
export default requests;

配置接口

在src目录下建立api文件夹，可以根据不同模块建立不同的js文件，涉及多个模块公用api接口的情况可以建立公共的js文件作为common

//引入二次封装的axios
import requests from "./axios";  

export const login = (params)=>requests({url:'/user/login ',method:'post',data:params});

 配置代理服务器

由于浏览器的同源策略，前端直接向服务器发送请求时会产生跨域问题，所以可以配置一个代理服务器去转发前端的请求，因为服务器和服务器之间不会产生跨域问题。

在vue.config.js中添加以下代码 

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {  //配置代理服务器
    proxy: {
        "/local": {
            target: "http://xxx.xxx.xxx.xxx",
        },
    },
},
})

完成调用

// vuex 中的actions
​actions：{
    login(){
        requests({url:'/user/login '+data,method:'get'}).then(res=>{
            if(res.code==200){
                   console.log("xxxx");
            }
        }})
    }
}