vue2中使用axios，以及axios拦截器的配置

目录

一、vue2项目中如何实现异步请求

1、axios：是一个基于Promise的网络请求库。既可以在node.js（服务器端）使用，也可以在浏览器端使用

2、vue中的使用方法

​ （2）引用方法：

​ A、原生的方式（不推荐使用）

​ B、在项目的main.js文件中导入axios，将其写入Vue的原型中（推荐使用）

缺点：只能在vue2中使用，vue3中不能用

C、将axios单独封装到某个配置文件中（在配置文件中单独封装axios实例）—— （推荐使用）

优点：既可以在Vue2中使用，也可以在Vue3中使用

3、axios中不同请求方式向服务器提交数据的格式：

二、axios拦截器的配置

2、拦截器：

​ （1）请求拦截器：对客户端发起的请求进行统一的前期处理

                                （token、时间戳、cookie等）

​ （2）响应拦截器：对服务器端响应给客户端的数据统一进行处理之后再发给客户端

---

---

一、vue2项目中如何实现异步请求

1、axios：是一个基于Promise的网络请求库。既可以在node.js（服务器端）使用，也可以在浏览器端使用

（1）在node.js中使用的原生的http模块

（2）在浏览器中使用的XMLHttpRequest

2、vue中的使用方法

（1）安装：npm install axios

​ （2）引用方法：

​ A、原生的方式（不推荐使用）

  axios({
      url: 'http://localhost:8089/students/test',  //远程服务器的url
      method: 'get' //请求方式
    }).then(res=>{
      this.students = res.data
    }).catch(e=>{
      console.log(e)
    })
//缺点：每个使用axios的组件都需要导入

强调：axios对服务器端数据的封装

​ res.config：响应信息的配置情况

​ res.data：响应的数据

​ res.headers：响应头信息（信息的大小、信息的类型）

​ res.request：异步的请求对象（XMLHttpRequest）

​ res.status：请求-响应的状态码（200）

​ res.statusText：请求-响应状态码对应的文本信息

​ B、在项目的main.js文件中导入axios，将其写入Vue的原型中（推荐使用）

//该文件是脚手架项目中的main.js

import axios from "axios";
Vue.prototype.$http = axios //在Vue的原型上添加一个$http属性，该属性保存了axios
axios.defaults.baseURL = 'http://localhost:8089'

 在组件中通过this.$http的方式来使用

this.$http.get('http://localhost:8089/students/test').then(res=>{
          this.students = res.data
}).catch(e=>{
          console.log(e)
})

缺点：只能在vue2中使用，vue3中不能用