没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
![preview](https://dl-preview.csdnimg.cn/13205911/0001-9e570782796ad054912225984f799235_thumbnail.jpeg)
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
试读
2页
前言 ajax相信不用过多介绍了,作者坚信可以用配置解决的问题,请勿硬编码,下面话不多说了,来一看看详细的介绍吧。 姊妹篇 jQuery进阶:用最优雅的方式写ajax请求 axios是Vue官方推荐的ajax库, 用来取代vue-resource。更多详细的基础知识可以参考这篇文章://www.jb51.net/article/109444.htm 优点: 增加一个ajax接口,只需要在配置文件里多写几行就可以 不需要在组件中写axios调用,直接调用api方法,很方便 如果接口有调整,只需要修改一下接口配置文件就可以 统一管理接口配置 1. content-type配置
资源详情
资源评论
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/13205911/bg1.jpg)
axios进阶实践之利用最优雅的方式写进阶实践之利用最优雅的方式写ajax请求请求
前言前言
ajax相信不用过多介绍了,作者坚信可以用配置解决的问题,请勿硬编码,下面话不多说了,来一看看详细的介绍吧。
姊妹篇 jQuery进阶:用最优雅的方式写ajax请求
axios是Vue官方推荐的ajax库, 用来取代vue-resource。更多详细的基础知识可以参考这篇文
章://www.jb51.net/article/109444.htm
优点:优点:
增加一个ajax接口,只需要在配置文件里多写几行就可以
不需要在组件中写axios调用,直接调用api方法,很方便
如果接口有调整,只需要修改一下接口配置文件就可以
统一管理接口配置
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,
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![thumb](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
weixin_38602563
- 粉丝: 3
- 资源: 934
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)
评论0