这篇文章主要知识点是关于axios、ajax请求、vue、ajax请求、axios、axios、ajax、VUE 更好的 ajax 上传处理 axios.js实现代码 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书
前言
ajax相信不用过多介绍了,作者坚信可以用配置解决的问题,请勿硬编码,下面话不多说了,来一看看详细的介绍吧。
姊妹篇 jQuery进阶:用最优雅的方式写ajax请求
axios是Vue官方推荐的ajax库, 用来取代vue-resource。
优点:
1. content-type配置
// filename: content-type.js module.exports = { formData: 'application/x-www-form-urlencoded; charset=UTF-8', json: 'application/json; charset=UTF-8' }
2. api 配置
// filename: api-sdk-conf.js import contentType from './content-type' export default { baseURL: 'http://192.168.40.231:30412', apis: [ { name: 'login', path: '/api/security/login?{{id}}', method: 'post', contentType: contentType.formData, status: { 401: '用户名或者密码错误' } } ] }
3. request.js 方法
// request.js import axios from 'axios' import qs from 'qs' import contentType from '@/config/content-type' import apiConf from '@/config/api-sdk-conf' var api = {} // render 函数用来渲染路径上的变量, 算是一个微型的模板渲染工具 // 例如render('/{{userId}}/{{type}}/{{query}}', {userId:1,type:2, query:3}) // 会被渲染成 /1/2/3 function render (tpl, data) { var re = /{{([^}]+)?}}/ var match = '' while ((match = re.exec(tpl))) { tpl = tpl.replace(match[0], data[match[1]]) } return tpl } // fire中的this, 会动态绑定到每个接口上 function fire (query = {}, payload = '') { // qs 特别处理 formData类型的数据 if (this.contentType === contentType.formData) { payload = qs.stringify(payload) } // 直接返回axios实例,方便调用then,或者catch方法 return axios({ method: this.method, url: render(this.url, query), data: payload, headers: { contentType: this.contentType } }) } apiConf.apis.forEach((item) => { api[item.name] = { url: apiConf.baseURL + item.path, method: item.method, status: item.status, contentType: item.contentType, fire: fire } }) export default api
4. 在组件中使用
import api from '@/apis/request' ... api.login.fire({id: '?heiheihei'}, { username: 'admin', password: 'admin', namespace: '_system' }) ...
浏览器结果:
Request URL:http://192.168.40.231:30412/api/security/login??heiheihei Request Method:POST Status Code:200 OK Remote Address:192.168.40.231:30412 Referrer Policy:no-referrer-when-downgrade POST /api/security/login??heiheihei HTTP/1.1 Host: 192.168.40.231:30412 Connection: keep-alive Content-Length: 47 Accept: application/json, text/plain, */* Origin: http://localhost:8080 contentType: application/x-www-form-urlencoded; charset=UTF-8 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36 Content-Type: application/x-www-form-urlencoded Referer: http://localhost:8080/ Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 username=admin&password=admin&namespace=_system
5. 更多
有个地方我不是很明白,希望懂的人可以给我解答一下
如果某个组件中只需要login方法,但是我这样写会报错。
import {login} from '@/apis/request'
这样写的前提是要在request.js最后写上
export var login = api.login
但是这是我不想要的,因为每次增加一个接口,这里都要export一次, 这不符合开放闭合原则,请问有什么更好的方法吗?
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对码农之家的支持。
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。
首先就是引入axios,如果你使用es6,只需要安装axios模块之后
import axios from 'axios'; //安装方法 npm install axios //或 bower install axios
当然也可以用script引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios提供了一下几种请求方式
axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项
//config import Qs from 'qs' { //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url url: '/user', // 请求方法同上 method: 'get', // default // 基础url前缀 baseURL: 'https://some-domain.com/api/', transformRequest: [function (data) { // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装) data = Qs.stringify({}); return data; }], transformResponse: [function (data) { // 这里提前处理返回的数据 return data; }], // 请求头信息 headers: {'X-Requested-With': 'XMLHttpRequest'}, //parameter参数 params: { ID: 12345 }, //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错 data: { firstName: 'Fred' }, //设置超时时间 timeout: 1000, //返回数据类型 responseType: 'json', // default }
有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用
axios.post(url,{},config) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); }) //axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。 //下面是关于同时发起多个请求时的处理 axios.all([get1(), get2()]) .then(axios.spread(function (res1, res2) { // 只有两个请求都完成才会成功,否则会被catch捕获 }));
最后还是说一下配置项,上面讲的是额外配置,如果你不想另外写也可以直接配置全局
axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //当然还可以这么配置 var instance = axios.create({ baseURL: 'https://api.example.com' });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。
以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。
Copyright 2018-2020 www.xz577.com 码农之家
版权投诉 / 书籍推广 / 赞助:520161757@qq.com
VUE 更好的 ajax 上传处理 axios.js实现代码
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。 首先就是引入axios,如果你使用es6,只需要安装axios模块之后 import axios from 'axios';//安装方法npm install axios//或bower install axios 当然也可以用script引入 script src="https://unpkg.com/axios/dist/axios.min.js"/script axios提供了一下几种请求方式 axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]]) 这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项 //configimport Qs from 'qs'{ //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url url: '/user', // 请求方法同上 method: 'get', // default // 基础url前缀 baseURL: '……
在Vue组件化中利用axios处理ajax请求的使用方法
本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 推荐方式 首先在 main.js 中引入 axios // 引入 axiosimport axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined。 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型链作为Vue的属性 // 设置axios请求的默认hostaxios.defaults.baseURL = "https://www.ifilm.ltd/api/"// 将axios绑定给vue成为一个属性Vue.prototype.$http = axios 在其他组件中使用axios this.$http.get('路由').then(response = { // todo something }) 此方式可以类比到Vue的其他库使用 两种不推荐的使用示范 将axios全局化,作为全局变量 // 引入axiosimport axios from 'axios'// 将axios全局化window.axios = axios; 另外一个不……
vue axios 在页面切换时中断请求方法 ajax
如下所示: Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken;let cancel;let cancelAjaxText = '中断成功';Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new CancelToken(c = { //强行中断请求要用到的 cancel = c }) }).then(res =res.data,res={ //中断请求和请求出错都会走这里,我这里用 cancelAjaxText 来区别 if(res.message == cancelAjaxText){ return {status : false,msg:cancelAjaxText} }else{ this.$confirm('登录过时,是否重新登录', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() = { window.location.href = Vue.prototype.url_head + '/'; }).catch(() = { }); } }) return ajax;}; 接入 axios ,在POST方法里加入 cancelToken 数据,在上面else中,中断请求和请求出错都会走那里,所以用一个msg来识别(因为接口返回中也有一个msg,统一一下); 以下是 中断请求的方……
vue 组件的封装之基于axios的ajax请求方法
如下所示: import Vue from 'vue' let service = { url: 'http://host.xxxxx.com/xxx.php'} service.ajaxReuqest = (url, options, type, fileFlag) = { for (const i in options) { if (!options[i] options[i] !== 0 (options[i].length options[i].length 0)) { delete options[i] } } let promise = new Promise((resolve, reject) = { if (fileFlag) { Vue.axios.post(url, options, { headers: { 'Content-Type': 'multipart/form-data' } }).then((res) = { resolve(res) }) } else if (type === 'GET') { Vue.axios.get(url, { params: options }).then((res) = { resolve(res.data.resultObj) }).then((err) = { reject(err) }) } else { Vue.axios.post(url, options).then((res) = { resolve(res) }).then((err) = { reject(err) }) } }) return promise} 支持POST GET请求以及图片上传,基于axios,适用于vue, 以异步获取省份列表作为例子: // 获取省份信息service.getProvinceList = (options) = { return service.ajaxRequest(service.url + '/basic/getProvinceList', options, 'POST')} getProvinceList () { se……