axios步骤详解,小程序封装ajax等工具函数

tip

通过封装了工具类的代码提取出来封装成函数,我们就可以少写一些重复性的代码,并培养我们消除重复代码的习惯。

动态Axios的配置步骤详解,axios步骤详解

前言

以前写Vue项目的时候都是使用vue-resource做为项目ajax库,在11月份的某一天尤大微博的更新表示ajax的库应该是通用的,放弃了对vue-resource的技术支持,推荐使用axios。

推荐使用Vue-cli工具来创建和管理项目,就算刚开始不熟悉,用着用着便可知晓其中的奥妙。前一段时间官方所推荐的数据请求插件还是Vue-resource,但现在已经变了,变成了Axios,不用知道为什么变了,反正这个用起来比那个好一些,用就是了,下面是一些封装axios请求的一些经验,不对之处,还望多多指教!

方法如下

一、创建文件,Vue项目初始化之后,在src目录下再创建一个util工具文件夹,一般就是用来存放一些封装的函数方法,现在让我们在util文件目录下创建一个http.js文件,封装axios方法。

二、直接上代码(常规版),代码中有详细的注释

import axios from 'axios' //引用axiosimport {Promise} from 'es6-promise' //引入Promise// axios 配置axios.defaults.timeout = 5000; //设置超时时间axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口// http request 拦截器(所有发送的请求都要从这儿过一次),通过这个,我们就可以把token传到后台,我这里是使用sessionStorage来存储token等权限信息和用户信息,若要使用cookie可以自己封装一个函数并import便可使用axios.interceptors.request.use( config => { const token = sessionStorage.getItem("token"); //获取存储在本地的token config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/json' //设置跨域头部,虽然很多浏览器默认都是使用json传数据,但咱要考虑IE浏览器。 }; if (token) { config.headers.Authorization = "Token " + token; //携带权限参数 } return config; }, err => { return Promise.reject(err); });// http response 拦截器(所有接收到的请求都要从这儿过一次)axios.interceptors.response.use( response => {//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码,这个可以自己和后台约定,约定返回某个自定义字段也是可以的 if(response.status == 401) { router.push({ //push后面是一个参数对象,可以携带很多参数,具体可以去vue-router上查看,例如query字段表示携带的参数 path: '/login' }) } return response; }, error => { return Promise.reject(error.response.data) });export default axios;/** * fetch 请求方法 * @param url * @param params * @returns {Promise} */export function fetch(url, params = {}) { return new Promise((resolve, reject) => { axios.get(url, { params: params }) .then(response => { resolve(response.data); }) .catch(err => { reject(err) }) })}/** * post 请求方法 * @param url * @param data * @returns {Promise} */export function post(url, data = {}) { return new Promise((resolve, reject) => { axios.post(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }) })}/** * patch 方法封装 * @param url * @param data * @returns {Promise} */export function patch(url, data = {}) { return new Promise((resolve, reject) => { axios.patch(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }) })}/** * put 方法封装 * @param url * @param data * @returns {Promise} */export function put(url, data = {}) { return new Promise((resolve, reject) => { axios.put(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }) })}

三、(动态版),axios的拦截器不是必要的,不是每个项目都需要,而且headers里面的Content-Type和Authorization不止一种,这时就需要使用另一种方法。

util/http.js

import axios from 'axios' //引用axiosimport {Promise} from 'es6-promise' //引入Promise// axios 配置和拦截器都不用了,这里我使用了一个动态配置数据请求地址,在App.vue中,代码在下面,这个也不是必须的。//^_^下面都设置一个默认的头部,使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时,没有请求数据,但是请求头有变化,则应写成 fetch("地址", {}, {"这里写头部的内容"}) 记住没数据用一个空对象占位置/** * fetch 请求方法 * @param url * @param params * @returns {Promise} */export function fetch(url, params = {}, headers = { 'Content-Type': 'application/json', //设置跨域头部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken")}) { return new Promise((resolve, reject) => { axios.get(url, { params: params, headers: headers }) .then(response => { resolve(response.data); }) .catch(err => { reject(err.response) }) })}/** * post 请求方法 * @param url * @param data * @returns {Promise} */export function post(url, data = {}, config = { "headers": { 'Content-Type': 'application/json', //设置跨域头部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") }}) { return new Promise((resolve, reject) => { axios.post(url, data, config) .then(response => { resolve(response.data); }, err => { reject(err.response); }) })}/** * patch 方法封装 * @param url * @param data * @returns {Promise} */export function patch(url, data = {}, config = { "headers": { 'Content-Type': 'application/json', //设置跨域头部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") }}) { return new Promise((resolve, reject) => { axios.patch(url, data, config) .then(response => { resolve(response.data); }, err => { reject(err.response); }) })}/** * put 方法封装 * @param url * @param data * @returns {Promise} */export function put(url, data = {}, config = { "headers": { 'Content-Type': 'application/json', //设置跨域头部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") }}) { return new Promise((resolve, reject) => { axios.put(url, data, config) .then(response => { resolve(response.data); }, err => { reject(err.response); }) })}

App.vue(这是在src目录下的程序入口文件)

<template> <div id="app"> <router-view/> </div></template><script>import axios from 'axios';let protocol = window.location.protocol; //协议let host = window.location.host; //主机let reg = /^localhost+/;if(reg.test(host)) { //若本地项目调试使用 axios.defaults.baseURL = 'http://10.0.xx.xxx:xxxx/api/';} else { //动态请求地址 axios.defaults.baseURL = protocol + "//" + host + "/api/";}axios.defaults.timeout = 30000;export default { name: 'app', axios //这里记得导出,若请求地址永久固定一个,则就按照`普通版`配置一个baserURL就可以了}</script><style lang="scss"> //这里我使用的是scss@import '[email protected]/style/style'</style>

总结

常见问题

在使用动态版时,为什么称为动态呢,是因为访问地址和请求地址是同一个地址可端口号,例如我通过
数据请求地址配置不正确?如果你配置了baseURL,那么你封装的函数在使用时仅需传入基于baseURL的请求地址,例如传入login/那么请求地址会自动变为http:www.cmgos.com:80/api/login/,若未配置,那么可以直接传入整个请求地址

注意事项

在使用动态版时,由于没有使用拦截器,所以下面封装的函数在返回错误的时候需要写成err.response.data来获取返回的数据,但我写的是err.response,因为这样可以拿到(status)状态码等信息,若不需要判断返回的状态码,则改为err.response.data便可

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对帮客之家的支持。

前言
以前写Vue项目的时候都是使用vue-resource做为项目ajax库,在11月份的某一天尤大微博的更新表示...

重复性代码

我们知道使用小程序自带的wx.request API可以发起网络请求,写法如下

wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function { console.log }})

但是做项目的时候碰到多个请求的时候,每次请求就需要写一遍,会存在很多重复代码,好在小程序项目目录里面有个util目录,里面也给我们写了个示例的formatTime工具函数,并将它exports出来了

// util.jsconst formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() const second = date.getSeconds() return [year, month, day].map(formatNumber).join + ' ' + [hour, minute, second].map(formatNumber).join}const formatNumber = n => { n = n.toString() return n[1] ? n : '0' + n}module.exports = { formatTime: formatTime}

188金宝搏,书写我们自己的工具函数

首先,我们将ajax函数封装下,返回一个promise, 将下面代码添加到
util目录下的util.js中

const ajax = (url, data, method, config = {}) => { let headerConfig = { // 默认header ticket、token、params参数是每次请求需要携带的认证信息 ticket: '...', token: '...', params: '...' } return new Promise((resolve, reject) => { // 返回一个promise wx.request({ url: host + url, // 拼接url data, header: Object.assign({}, headerConfig, config), // 合并传递进来的配置 method: method, success{ resolve } }) })}

我们再添加一个深拷贝的函数

function deepCopy { var c = c || {} for (var i in o) { if (typeof o[i] === 'object') { //要考虑深复制问题了 if (o[i].constructor === Array) { //这是数组 c[i] = [] } else { //这是对象 c[i] = {} } deepCopy(o[i], c[i]) } else { c[i] = o[i] } } return c}

添加好后,再将函数exports出去 如下

module.exports = { formatTime: formatTime, ajax: ajax, deepCopy: deepCopy}

首先我们在app.js顶部添加

const util = require('./utils/util.js') // 将工具函数导入进来

然后在App函数中添加Util字段

Util:{ ajax: util.ajax, deepCopy: util.deepCopy}

页面中实例化getApp()函数后,我们就可以使用工具函数了

let app = getApp()app.Util.ajax.then => { // 使用ajax函数 // 请求相应后的操作}) 

相关文章

Comment ()
评论是一种美德,说点什么吧,否则我会恨你的。。。