Vue使用Axios请求后端接口的方法

1.在入口文件引入axios并配置请求头根路径和请求头拦截

1.  
   // 引入axios
2.  
   import axios from 'axios'
3.  
   // 设置请求根路径
4.  
   axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
5.  
   // 设置请求头拦截
6.  
   axios.interceptors.request.use(config => {
7.  
   config.headers.Authorization = window.sessionStorage.getItem('token');
8.  
   console.log(config);
9.  
   // 在最后必须 return config
10.  
    return config
11.  
    })
12.  
    // 把axios挂到Vue实例对象上
13.  
    Vue.prototype.$http = axios

经过以上设置则可以通过 this.$http发送axios请求后端接口

2.发送各类请求携带参数的格式：

（1）get请求

1.  
   const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,
2.  
   { params: { sel: this.activeName } }
3.  
   );
4.  
   // 若要求参数携带在url中 可以通过 `` 包裹后端地址，使用${}在url中携带对应参数
5.  
   // 不携带在url的参数需要通过 params传递参数
6.  
   // 若参数不携带在url中，且参数很多，可以把接口所需参数打包成一个对象，通过params把由各个参数组成的对象直接传给后端接口

（2）post请求

1.  
   const { data: res } = await this.$http.post(`categories/${this.cateId}/attributes`,
2.  
   {
3.  
   attr_name: this.addForm.attr_name,
4.  
   attr_sel: this.activeName,
5.  
   }
6.  
   );
7.  
   // 若要求参数携带在url中 可以通过 `` 包裹后端地址，使用${}在url中携带对应参数
8.  
   // post请求不携带在url中的参数 需要通过 {} 以参数名：参数值 的格式逐一进行传递，每个参数以逗号分隔

（3）delete请求

1.  
   请求路径：users/:id 不能为空`参数是url参数:id`
2.  
    
3.  
   async removeUserById(id) {
4.  
   const { data: res } = await this.$http.delete("users/" id);
5.  
   },
6.  
    
7.  
   // 不携带在url中的url参数 使用字符串拼接的形式传递参数
8.  
   // 若要求参数携带在url中 可以通过 `` 包裹后端地址，使用${}在url中携带对应参数

（4）put请求

1.  
   const { data: res } =
2.  
   await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`,
3.  
   {
4.  
   attr_name: this.editForm.attr_name,
5.  
   attr_sel: this.editForm.attr_sel,
6.  
   }
7.  
   );
8.  
    
9.  
   // 若要求参数携带在url中 可以通过 `` 包裹后端地址，使用${}在url中携带对应参数
10.  
    // post请求不携带在url中的参数 需要通过 {} 以参数名：参数值 的格式逐一进行传递，每个参数以逗号分隔

这篇好文章是转载于：学新通技术网