vue项目之axios

悠悠 2023-03-12 09:26 0阅读 0赞

## 配置`axios`发起登录请求 ##

> 在`main.js`中：配置`axios`
> 
> 1.  导入`axios`包
> 2.  配置请求的根路径
> 3.  把`axios`包挂载到`vue原型`对象上：这样每一个`vue`组件都可以通过this直接访问到`$http`，
> 
> 从而去发起`ajax`请求
> 
>     // 导入axios包
>     import axios from 'axios'
>     // 配置请求的根路径
>     axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
>     Vue.prototype.$http = axios

### 通过`axios`请求拦截器为请求头添加token,保证拥有获取数据的权限 ###

> `API`接口文档要求：需要授权的`API` ，必须在请求头中使用 `Authorization` 字段提供 `token` 令牌
> 
> 意思是：除了登录接口之外，其他所有接口必须授权才能正常调用，怎么授权呢？
> 
>  调用登录接口–服务器端会返回登录成功的token令牌，这个令牌就是我们权限认证的字段
> 
>  在每一个请求头中添加`Authorization` 字段提供 `token` 令牌，想到了请求拦截器!!!
> 
> 在`main.js`中：
> 
> 请求拦截器内容，放下下面代码的前面
> 
>     // 把axios包挂载到vue实例对象的属性上
>     Vue.prototype.$http = axios
> 
> 登录成功之后，查看network-login，查看请求头 `Authorization：null`  
> 原因：因为发起的是登录请求，你在登录期间服务器肯定没给你颁发令牌，默认是null  
> 如果登录之后，调用其他接口，再去监听请求就会发现Authorization的值就是token值  
> 这样服务器接收到这次请求，它会先判断Authorization是否符合要求，它才会给你响应。  
> 如果不符合要求或者`Authorization：null`,服务器会驳回这次请求
> 
> 只要通过`axios`向服务器端发送请求，必然会在发送请求期间优先调用use回调函数，会这次请求进行预处理  
> 这次请求经过处理之后，才会发送到服务器进行真正的处理
> 
> `axios`请求拦截
> 
> `config`是请求对象

axios.interceptors.request.use(config => { 
        // 为请求头对象，添加 Token 验证的 Authorization 字段
        config.headers.Authorization = window.sessionStorage.getItem('token')
        // 表示对这次请求做了预处理
        return config  
      })

### 如何在全局使用 `axios` ###

> 有三种方法：
> 
> 1.  结合 `vue-axios`使用
>     
>      *  首先在主入口文件`main.js`中引用
> 
>     import axios from 'axios'
>     import VueAxios from 'vue-axios'
>     
>     Vue.use(VueAxios,axios);
> 
>  *  之后就可以使用了，在组件文件中的methods里去使用了
> 
>     getBanners(){
>        this.axios.get('api/getBanners').then((response)=>{
>          this.banners=response.data.data;
>        }).catch((response)=>{
>          console.log(response);
>        })
>     }
> 
> 1.  [axios][] 改写为`Vue` 的原型属性（项目中的做法）
>     
>      *  首先在主入口文件`main.js`中引用，之后挂在`vue`的原型链上
> 
>     Vue.prototype.$ajax= axios
> 
>  *  在组件中使用
> 
>     getBanners(){
>        this.$ajax.get('api/getBanners').then((response)=>{
>          this.banners=response.data.data;
>        }).catch((response)=>{
>          console.log(response);
>        })
>     }
> 
> 1.  结合 `Vuex`的action
>     
>      *  在`vuex`的仓库文件`store.js`中引用，使用action添加方法
> 
>     import Vue from 'Vue'
>     import Vuex from 'vuex'
>     
>     import axios from 'axios'
>     
>     Vue.use(Vuex)
>     const store = new Vuex.Store({
>     // 定义状态
>     state: {
>      user: {
>        name: 'xiaoming'
>      }
>     },
>     actions: {
>      // 封装一个 ajax 方法
>      login (context) {
>        axios({
>          method: 'post',
>          url: '/user',
>          data: context.state.user
>        })
>      }
>     }
>     })
>     
>     export default store
> 
>  *  在组件中发送请求：`this.$store.dispatch`
> 
>     this.$store.dispatch('login')

### 使用方法： ###

#### get请求用`params`传递参数 ####

> data中定义：
> 
>  *  请求参数对象`queryinfo`
>  *  权限列表 `rightslist`
> 
>     const { data: res} = await this.$http.get('users',{ params:this.queryinfo}) 
>     
>     if(res.meta.status!==200) return this.$message.error(res.meta.msg)
>     
>     // 把获取到的权限数据保存到data数据中
>     this.rightslist = res.data
> 
>     // 请求路径：categories/:id/attributes
>     
>     const { data: res} = await this.$http.get(`categories/${ this.cateId}/attributes`,{ 
>     	params: { sel: this.activeName}
>     })
>     
>     if(res.meta.status!==200){ 
>     	return this.$message.error('获取参数列表失败！')
>     }
>     // 获取参数成功
>     console.log(res.data);

#### post请求 直接添加请求参数对象 ####

请求路径：categories/:id/attributes

>     const { data: res} = await this.$http.post('categories',this.addCateForm)
> 
>     const { data: res} = await this.$http.post(`categories/${ this.cateId}/attributes`,{ 
>     	attr_name: this.addForm.attr_name,
>     	attr_sel: this.activeName
>     })

#### delete请求直接添加请求参数对象 ####

> 请求路径： categories/:id/attributes/:attrid

>     const confirmResult = await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示',{ 
>     	confirmButtonText: '确定',
>     	cancelButtonText: '取消',
>     	type: 'warning'
>     }).catch(err => err)
>     // 用户取消了删除的操作
>     if(confirmResult!=='confirm'){ 
>     	return this.$message.info('已取消删除！')
>     } 
>     // 删除的业务逻辑
>     const { data: res} = await
>     this.$http.delete(`categories/${ this.cateId}/attributes/${ attr_id}`)
>     
>     if(res.meta.status!==200){ 
>     	return this.$message.error('删除参数失败！')
>     } 
>     this.$message.success('删除参数成功！')

#### put请求：直接添加请求参数对象 ####

请求路径：categories/:id/attributes/:attrId

>     const { data: res} = await this.$http.put(`categories/${ this.cateId}/attributes/${ this.editForm.attr_id}`,{ 
>     	attr_name: this.editForm.attr_name,
>     	attr_sel: this.activeName
>     })
>     if(res.meta.status!==200){ 
>     	return this.$message.error('修改参数失败！')
>     } 
>     // 1.修改参数成功
>     this.$message.success('修改参数成功！')

[axios]: https://www.npmjs.com/package/axios#resources