乐趣区

关于axios:axios封装和传参

jiezi

axios 封装和传参

1. 开发环境 vue+typescript
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们会常常应用到 axios 进行数据的交互, 上面我来说一下,axios 封装和传参!
4-1: 上面构造如下:

4-2:request.js 代码如下:

import axios from 'axios'
import qs from 'qs'
axios.defaults.timeout = 2000000;                        // 响应工夫
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';        // 配置申请头
// axios.defaults.baseURL = 'http://192.168.137.208:3000/';   // 配置接口地址

//POST 传参序列化 (增加申请拦截器)
axios.interceptors.request.use((config) => {
    // 在发送申请之前做某件事
    // config.headers.Accept="appliaction/json,text/plan";
    if(config.method  === 'post'){config.data = qs.stringify(config.data);
    }
    return config;
},(error) =>{console.log('谬误的传参')
    return Promise.reject(error);
});
// axios.interceptors.response.use((res) => {
//     // 对响应数据做些事
//     if (!res.data) {//       return Promise.resolve(res);
//     }
//     return res;
//   }, (error) => {//     console.log(error);
//     console.log('网络异样')
//     return Promise.reject(error);
//   });

// 返回状态判断 (增加响应拦截器)
axios.interceptors.response.use((res) =>{
    // 对响应数据做些事
    if(!res.data.success){return Promise.resolve(res);
    }
    return res;
}, (error) => {console.log('网络异样')
    return Promise.reject(error);
});

// 返回一个 Promise(发送 post 申请)
export function fetchPost(url,param) {return new Promise((resolve, reject) => {axios.post(url,param)
            .then(response => {resolve(response);
            }, err => {reject(err);
            })
            .catch((error) => {reject(error)
            })
    })
}
// 返回一个 Promise(发送 get 申请)
export function fetchGet(url,param) {return new Promise((resolve, reject) => {axios.get(url,{params:param})
            .then(response => {resolve(response)
            }, err => {reject(err)
            })
            .catch((error) => {reject(error)
            })
    })
}
export default {
    fetchPost,
    fetchGet,
}

// 留神: 申请头的配置, 决定了传参的办法和格局, 申请头的配置至关重要
5.SheBei.ts 代码如下:

import {fetchPost,fetchGet} from '@/utils/request'
export function feng(feng){return fetchPost('/feng',feng);
}

6.Home.vue 申请代码如下:

mounted(){
      let a:any={
          "name":"111",
          "pass":"000"
      }
      feng(a).then((res)=>{console.log(res);
      })
  }

7. 成果如下:

8. 在 node.js 中输出如下:

// 能够看到, 承受到了前端传过来的参数!
9. 参数的传递取决于,request.ts 中申请头的配置!
10. 申请头配置如下:

-- 第一种
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 申请体中的数据会以一般表单模式（键值对）发送到后端
-- 第二种
axios.defaults.headers.post['Content-Type'] ='application/json'; // 申请体中的数据会以 json 字符串的模式发送到后端
-- 第三种
axios.defaults.headers.post['Content-Type'] ='multipart/form-data'; // 它会将申请体的数据处理为一条音讯，以标签为单元，用分隔符离开。既能够上传键值对，也能够上传文件

11. 应用 10 第一种, 传参成果如下:

12. 应用 10 第二种, 传参成果如下:

// 留神: 应用这种办法, 须要批改 request.ts 代码:

13. 应用 10 第三种, 传参成果如下:

14. 本期的教程到了这里就完结啦, 让咱们一起致力走向巅峰!

退出移动版