前端 Axios 使用 全局配置 拦截器配置 --Vue中安装Axios_前端全局请求拦截

目录

Axios 介绍：

引入：

axios基本用法：

axios全局配置：

axios拦截器：

 Vue 中安装 axios：

---

Axios 介绍：

1. 基于promise用于浏览器和node.js的http客户端
2. 支持浏览器和node.js;
3. 支持promise;
4. 能拦截请求和响应请求;
5. 自动转换JSON数据;
6. 能转换请求和响应数据;

引入：

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

axios基本用法：

1. get和delete请求传递参数

   1 发送get 请求 
         axios.get('http://localhost:3000/adata').then(function(ret){ 
             // 拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
             // 注意data属性是固定的用法，用于获取后台的实际数据
             // console.log(ret.data)
             console.log(ret)
           })
    
    
         axios delete 请求传参  传参的形式和 get 请求一样
           axios.delete('http://localhost:3000/axios', {
             params: {
               id: 111
             }
           }).then(function(ret){
             console.log(ret.data)
           })
   

   1. 通过传统的url以?的形式传递参数

       2.1  通过传统的url  以 ? 的形式传递参数
            axios.get('http://localhost:3000/axios?id=123').then(function(ret){
                console.log(ret.data)
              })
      

   2. restful形式传参

      2.2  restful 形式传递参数 
              axios.get('http://localhost:3000/axios/123').then(function(ret){
                console.log(ret.data)
              })
      

   3. 通过params形式传递参数

      2.3  通过params  形式传递参数 
              axios.get('http://localhost:3000/axios', {
                params: {
                  id: 789
                }
              }).then(function(ret){
                console.log(ret.data)
              })
      

2. post和put请求传递参数

   4  axios 的 post 请求
           4.1  通过选项传递参数
           axios.post('http://localhost:3000/axios', {
             uname: 'lisi',
             pwd: 123
           }).then(function(ret){
             console.log(ret.data)
           })
   

   1. 通过选项传递参数

      4.2  通过 URLSearchParams  传递参数 
              var params = new URLSearchParams();
              params.append('uname', 'zhangsan');
              params.append('pwd', '111');
              axios.post('http://localhost:3000/axios', params).then(function(ret){
                console.log(ret.data)
              })
      

   2. 通过URLSearchParams传递参数

      5  axios put 请求传参   和 post 请求一样 
              axios.put('http://localhost:3000/axios/123', {
                uname: 'lisi',
                pwd: 123
              }).then(function(ret){
                console.log(ret.data)
              })
      

axios全局配置：

 //配置公共的请求头
  axios.defaults.baseURL = 'https://127.0.0.1:3000/api'
 
  // 配置超时时间
  axios.defaults.timeout = 3000;
 
  // 配置公共请求头
  axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 
  //配置公共的post的Content-Type
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios拦截器：

1. 请求拦截器:

   请求拦截器的作用是在请求发送前进行一些操作,
   例如:在每个请求体中加上token,统一做了处理 后要改也很简单
    
    
   //1.请求拦截器
     axios.interceptors.request.use(function(config){
         console.log(config.url)
         //  任何一部都会经过这一步,在发送请求前做些什么
         config.headers.mytoken = 'token字符串'
         //  这里一定要return 否则配置不成功
         return config
     },function(err){
         //请求错误的时候
         console.log(err)
     })
   

2. 响应拦截器:

   响应拦截器的作用是在接收到响应后进行的一些操作,
   如:在服务器返回登录状态失效,需要重新 登录的时候,跳转到登录页;
    
   //2.响应拦截器
     axios.interceptors.response.use(function(res){
         //  接收响应后做些什么
         var data = res.data;
         return data;
     },function(err){
         //打印错误
         console.log(err)
     })
   

 Vue 中安装 axios：

1. 安装依赖：（在控制台）

   npm i axios -S
   

2. 配置：

   在main.js中导入 axios
   import axios from 'axios'
    
   import Vue from 'vue'
    
   在全局挂载 axios 方便在各个组件使用
   Vue.prototype.$axios = axios
    
   new Vue({
     render: h => h(App),
   }).$mount('#app')
   

3. 对axios进行二次封装:

   导入依赖
   import axios from 'axios'
    
   配置属性
   const service = axios.create({
     baseURL: '......',
     timeout: 3000,
   })
    
    
   export default service
   

   配置拦截器：

   // 请求拦截器
   // 在发送请求前 操作
   service.interceptors.request.use((config) => {
    
     // 获取 并 在请求头设置 token
     config.headers['token'] = getToken('token')
     return config
   }, (error) => {
     return Promise.reject(error)
   })
    
    
   // 响应拦截器
   // 对响应数据的操作
   service.interceptors.response.use((response) => {
     // 结构请求的数据
     let { status, message } = response.data
    
     if (status !== 200) {
       Message({ message: message || 'error', type: 'error' })
     }
     return response
   }, (error) => {
     return Promise.reject(error)
   })