积累：Axios

小墨鱼不敢拿
347 阅读4分钟

Axios

1.是什么和作用

定义：
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Vue 官方推荐使用 Axios 来完成数据请求。

作用：
在学习前端时我们用到的数据都是直接自己在本地定义的，而在实际项目中，页面中的数据通常都是从服务器端获取的，那么Axios就是实现前端项目与服务器端进行通信--数据请求

2.如何安装？

使用 CDN 方式引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用 NPM 安装方式

npm install axios

3.在VUE中使用axios：两种方法

方法一：请求数量很少时，不用为axios单独创建实例

1.引入axios--2.基路径配置--3.全局挂载--4.项目使用时写入路径和实参

在 main.js 文件中导入 axios ，并绑定到 Vue 的原型链上

//main.js文件
import axios from 'axios'

Vue.prototype.$axios = axios;

//案例：
//1.引入：在main.js文件中
import axios from 'axios'
//2.配置axios请求路径
axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http=axios
//$http是个自定义属性，随意起名即可，等号后面是我们是axios组件

//3.在需要请求数据的页面使用
//首先查看API请求文档如何请求这个数据：路径、需要提交的参数...
//post方法提交表单：提交语法格式：Axios.post(url, data, config)
methods：{
    login（）{
      const { data:res }= await this.$http.post('login',this.loginForm)
      console.log（res）
    }
 }
//3.另一种使用数据请求的案例：get请求用户列表数据
//因为用户列表数据需要在页面渲染前就要请求完毕，所以需要在created生命周期函数中写入
//API说明文档：get请求方法、路径为users、需要提交三个参数： query、 pagenum、 pagesize

data(){
    return{
      //获取用户列表数据：需要提交的参数
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:2
      }，
      //获取用户列表数据：储存返回的数据
      userlist:[],
      total:0
    }
 created () {
    //请求用户列表数据
    this.getUserList()
  },
 methods:{
    //请求用户列表数据:需要提交三个参数
    async getUserList(){
      const {data:res}=await this.$http.get('users',{params:this.queryInfo})
      //获取失败时返回提示信息
      if(res.meta.status!==200) return this.$message.error('获取用户列表失败')
      //获取成功后，将返回的数据储存到data里，方便其他时候使用
      this.userlist=res.data.users
      this.total=res.data.total
      //console.log(res)
    }
  }

 
 //为什么挂载到vue的原型上？
 因为vue本质是个构造函数，原型上用来储存方法，将请求方法挂载到vue的原型相当于=在vue全局能够使用这个公用方法--请求数据方法

其他参数配置详解

方法二：创建axios实例

安装axios--引入--创建实例对象--配置根路径和其他参数--拦截器设置--配置项目请求的子路径和方法

supermall项目

为axios单独创建文件夹newwork
（我们在向服务器发送请求的时候，需要配置请求地址、请求方式和请求头等信息。
如果需要向同一个服务器发送多次请求，那么配置项就需要重新设置，而 axios 为了方便，运行我们提前对一些信息进行配置，然后重复使用这些配置项）

//request.js文件夹
//安装axios：npm install axios  --save
//引入axios插件
import axios from 'axios'
//axios基于promise：request.then
export function request (config) {
  //axios.create（config）来创建axios实例对象
  const instance = axios.create({  //输出函数名为：request的函数（形参：网络请求config）
    baseURL: 'http://152.136.185.210:7878/api/m5',//请求数据的默认接口地址
    timeout: 5000  //请求数据的默认接口地址
  })

  //axios的拦截器（在这个案例并未使用拦截器对数据进行操作改变）
  //实例名.属性.请求.使用（函数）
  instance.interceptors.request.use(config => {
    return config
  },err => {  //请求失败时执行
    console.log(err)
  })
  //响应response拦截
  instance.interceptors.response.use(res => {
    return res.data
  },err => {
    console.log(err)
  })
  //发送真正的网络请求(拦截时将数据截取了，最后做完操作要将数据返回
  return instance (config)
}

4.需要授权的数据请求：Token认证

应用场景：使用axios进行数据请求时，因为服务器数据是针对用户的，所以需要验证你的身份才能给你数据，第一次验证的是用户名和密码，然后给你token令牌，下次使用这个和他联络数据交换。这个token要加在HTTP Authrorization Header的里面。

//所以我们的目的就是在发送数据请求前拦截这个请求，在HTTP Authrorization Header加入token后再发送请求给服务器
//
import axios from 'axios'
//配置axios请求
axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
// 设置请求拦截器：
// 为https的请求头添加上token令牌，这样才能获取到需要授权的数据
axios.interceptors.request.use(config => {
  console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config//拦截后，对请求操作完必须将其返还
})
Vue.prototype.$http=axios


//在哪里查看这个Authrorization？
初次登录后，在F12的network里的login里，Request Header里就有Authrorization：null（因为是初次登录，是通过账号密码验证的，服务器还没有返回token令牌，只有第二次或者以后才会有这个令牌作为通信）
avatar
文章
阅读
粉丝