axios在实际项目中的使用介绍
Posted Ethan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了axios在实际项目中的使用介绍相关的知识,希望对你有一定的参考价值。
1.axios本身就封装了各种数据请求的方法
1 执行 GET 请求 2 3 // 为给定 ID 的 user 创建请求 4 axios.get(‘/user?ID=12345‘) 5 .then(function (response) { 6 console.log(response); 7 }) 8 .catch(function (error) { 9 console.log(error); 10 }); 11 12 // 可选地,上面的请求可以这样做 13 axios.get(‘/user‘, { 14 params: { 15 ID: 12345 16 } 17 }) 18 .then(function (response) { 19 console.log(response); 20 }) 21 .catch(function (error) { 22 console.log(error); 23 }); 24 25 执行 POST 请求 26 27 axios.post(‘/user‘, { 28 firstName: ‘Fred‘, 29 lastName: ‘Flintstone‘ 30 }) 31 .then(function (response) { 32 console.log(response); 33 }) 34 .catch(function (error) { 35 console.log(error); 36 });
2.这里我们根据axios提供的别名,进行调整
1 新建一个目录叫baseUrl,接着新建一个文件叫baseUrl.js 2 1)首先我们在开发过程中,会有不同的环境,这里指的是,后端会在不同的环境给我们提供对应的接口(开发环境,测试环境,灰度,线上)这个时候,我们就要对接口的baseUrl做统一处理(这样代码每推到一个环境,我们就不用做任何改变) 3 // 获取api的baseUrl 4 export default function getBaseUrl () { 5 let [baseUrl, urls, protocol] = [‘开发环境的api的baseUrl‘, location.href.toLowerCase(), ‘http://‘] 6 //判断协议,看是http还是https 7 if (location.protocol === ‘https:‘) { 8 protocol = ‘https://‘ 9 } 10 //一般api的baseUrl是和域名相同的,这里我们就通过域名来判断 11 if (urls.match(/测试环境的baseUrl/) && urls.match(/测试环境的baseUrl/)[0] === ‘测试环境的域名‘) { 12 baseUrl = protocol + ‘测试环境的域名‘ 13 } 14 //线上的 15 if (urls.match(/线上环境的域名/) && urls.match(/线上环境的域名/)[0] === ‘线上环境的域名‘) { 16 baseUrl = protocol + ‘线上的域名‘ 17 } 18 return baseUrl 19 }
3.现在我们根据axios提供的请求别名,处理两个我们常用的请求方法
1 新建一个文件就叫axios.js 2 1)首先我们使用es6提供的方法,引入axios和我们封装的getBaseUrl方法 3 import axios from ‘axios‘ 4 import getBaseUrl from ‘文件路径‘ 5 6 2)配置config 7 let baseUrl = getBaseUrl() 8 //这里我们只介绍这两个配置项,其他的不做详细解释,想要查看更多内容请参考官方文档 9 const config ={ 10 //baseURL将自动加在url(这个url也就是‘/‘的路径)上 11 baseURL:baseUrl, 12 //表示跨域请求时是否需要使用凭证,默认是false,但是对于一些,有登陆时效或者cookie凭证的请求时,这个最好加上 13 withCredentials: false 14 } 15 16 3)处理get请求传递过来的参数(因为get请求的参数是拼接在请求地址上的,所以这里我们需要手动处理一下get请求的url) 17 let urlEncode = (url, data) => { 18 if (typeof (url) === ‘undefined‘ || url === null || url === ‘‘) return ‘‘ 19 if (typeof (data) === ‘undefined‘ || data === null || typeof (data) !== ‘object‘) return url 20 url += (url.indexOf(‘?‘) !== -1) ? ‘‘ : ‘?‘ 21 for (let k in data) { 22 url += ((url.indexOf(‘=‘) !== -1) ? ‘&‘ : ‘‘) + k + ‘=‘ + encodeURI(data[k]) 23 } 24 return url 25 } 26 27 4)封装post和get请求 28 29 const get = (url, params) => { 30 //这里的url是请求数据的传递过来的 31 url = urlEncode(url, params) 32 return axios.get(url,config) 33 } 34 35 consot post = (url, params) => { 36 return axios.post(url, params, config) 37 } 38 39 5)将post和get方法暴露出去 40 41 export { 42 get, 43 post 44 }
4.根据不同的接口封装不同的请求方法(这个方法是用来直接获取数据的)
1 1)引入我们第三部处理好的post和get请求方法 2 import * as axios from ‘文件路径‘ 3 4 2)封装 5 const Logins = params => axios.post(‘/user/login‘, params) 6 7 const List = params => axios.get(‘/list‘, params)
5.在组件中使用
1 1)引入我们第四步处理好的方法(需要什么引入什么) 2 import { Logins, List } from ‘文件路径‘ 3 _Login () { 4 // 测试 5 Logins({ 6 user_name: ‘user_name‘, 7 pass: ‘pass‘ 8 }).then(data => { 9 if (data.data.code === ‘0‘) { 10 console.log(data) 11 } 12 }) 13 } 14 ......
以上是关于axios在实际项目中的使用介绍的主要内容,如果未能解决你的问题,请参考以下文章
VSCode自定义代码片段14——Vue的axios网络请求封装