关于axios:axios封装和传参

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.本期的教程到了这里就完结啦,让咱们一起致力走向巅峰!