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