Vue axios基础

Vue axios基础

基于 promise 的 HTTP 客户端axios

axios本身具有以下特征：

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防止 CSRF/XSRF

Promise

Promise 是异步编程的一种解决方案，而且还是以一种优雅的方式来处理异步请求的，本质上是一个构造函数，函数本身上巨有all、reject、resolve这几个方法，原型上有then、catch等方法。

对于主要解决的问题，由于笔者至今还未遇到过这样的需求，所以感触并没有太深刻，但是可以简单说明一下：
比如说对于传统的Ajax请求，如果第一次通过url1发送请求的时候需要服务器返回一个数据data1，而我们又需要data1取出url2的地址，来进行第二次网络请求，同理，第三次网络请求又需要第二次网络请求的返回的数据data2取出的url3… 这样一层层下去，不仅仅需要先验判断某一层网络请求失败的情况的代码，而且我们不能很好地将数据处理和数据请求分离，这样的代码就会显得很是冗余，一旦出现bug，对开发人员的debug要求就会变得很高。

其大致用法如下：

// 第一次异步网络请求
new Promise((resolve,reject) => {// 异步通信数据请求代码resolve(val) // 请求成功调用此函数reject(err) // 请求失败调用此函数
}).then(val => {// 处理第一次成功请求// 第二次异步网络请求new Promise((resolve,reject) => {// 异步通信数据请求代码resolve(val) // 请求成功调用此函数reject(err) // 请求失败调用此函数}).then(val => {...}).catch(err => {...})
}).catch(err => {// 处理第一次失败请求
})

axios的基本使用

项目根目录下执行以下命令安装axios:

npm install axios --save

导入并使用axios：

import axios from 'axios'// get方式
axios({url: "http://httpbin.org/get"，method: 'get',params:{name: "张三",id: 1001,age: 21}
}).then(res => {console.log(res);
})
// post方式
axios({url: "http://httpbin.org/post",method: 'post',data:{name: "张三",id: 1000,age: 20}
}).then(res => {console.log(res);
})

结果显示：

axios的并发请求

有时候，我们需要满足这样的需求：必须在特定的一些网络请求全部成功后才能统一执行某一事件。而axios已经封装好了这个方法，如下演示：

import axios from 'axios'axios.all([axios({method: "get",url: "http://httpbin.org/get",params:{name:"张三",id: 1001}}).then(res => {console.log("第一个axios请求成功",res);return res;}),axios({method: "post",url: "http://httpbin.org/post",data: {name:"李四",id: 1002}}).then(res => {console.log("第二个axios请求成功",res);return res;}),axios({method: "post",url: "http://httpbin.org/post",data: {name:"王五",id: 1003}}).then(res => {console.log("第三个axios请求成功",res);return res;})
]).then(result => {console.log("这个一定是等待以上全部请求成功后… ",result[0],result[1],result[2]);
})

为了减少相关代码的重复冗余，选择公共默认选项，可以使用axios.defaults方法，如下演示:

axios.defaults.baseURL = "http://httpbin.org";
axios.defaults.timeout = 1000; // 超时限制
axios({url: "/get",method: 'get',params:{name: "张三",id: 1001,age: 21}
}).then(res => {console.log(res);
})axios({url: "/post",method: 'post',data:{name: "张三",id: 1000,age: 20}
}).then(res => {console.log(res);
})

axios实例化

对于一些分布式服务器来说，全局配置axios可能是会冲突的，因此，axios允许创建axios实例。

const request1 = axios.create({baseURL: "http://httpbin.org",timeout: 1000
})
const request2 = axios.create({baseURL:"http://httpbin.org",timeout: 2000,method: "post"
})
request1({url: "/get",params:{name:"张三",age: 20}
}).then(res => {console.log(res);
})
request2({url: "/post",data:{name:"李四",age: 21}
}).then(res => {console.log(res);
})

axios模块化

为了减少网页之间与axios之间的耦合度(解耦合)，可以通过一个文件作为全局索引导入。

如，可以在src目录下创建一个network文件夹，目录下再创建request.js:

import axios from  'axios'// 这里config作为配置参数，success作为成功回调函数，failure作为失败回调函数
export function request(config,success,failure){const instance = axios.create({baseURL: "http://httpbin.org",timeout: 2000})// 发送真正的网络请求instance(config).then(res => {success(res)}).catch(err => {failure(err)})
}

使用方式：


import {request} from './network/request'request({url: "get",method: 'get',params: {name: "张三",age: 20}
}, res => {console.log(res);
}, err => {console.log(err);
})request({url: "post",method: 'post',data: {name: "王五",age: 21}
}, res => {console.log(res);
}, err => {console.log(err);
})

上例解释，创建一个axios实例，实现多组件共享，通过传递成功请求回调函数和传递失败回调函数作为一个出口，用户通过传递config参数也能自定义配置。同样，读者也可以实现多个axios默认实例导出供多个组件共享。

以上版本可以进一步升级，通过Promise方式，即进一步封装增强Promise：

request.js:

export function request(config){return new Promise((resolve,reject) => {// 配置默认项const instance = axios.create({baseURL: "http://httpbin.org",timeout: 2000})// 发送网络请求instance(config).then(res => {resolve(res)}).catch(err => {reject(err)})})
}

使用方式：

import {request} from './network/request'request({url: "/get",method: 'get',params:{name: "张三",age: 20}
}).then(res => {console.log(res);
}).catch(err => {console.log(err);
})request({url: "/post",method: 'post',params:{name: "赵六",age: 21}
}).then(res => {console.log(res);
}).catch(err => {console.log(err);
})

再进一步升级简化：

export function request(config){const instance = axios.create({baseURL: "http://httpbin.org",timeout: 2000})// 发送真正的网络请求return instance(config);
}

之所以可以像上面一样可以直接返回axios实例，是因为其本身就是继承了Promise。

拦截器

对于请求成功或失败，相应成功或失败都可以进行相应拦截操作。

一般可用作网络加载页面图标显示，或者登录页面的token验证等…

request.js:

export function request(config){const instance = axios.create({baseURL: "http://httpbin.org",timeout: 2000})instance.interceptors.request.use(config => {console.log("请求拦截配置：",config);return config;},err => {console.log(err);})instance.interceptors.response.use(res => {console.log("响应拦截结果：",res);return res.data.args; // 返回data即可},err => {console.log(err);})// 发送真正的网络请求return instance(config);
}

使用：


import {request} from './network/request'request({url: "/get",method: 'get',params:{name: "张三",age: 20}
}).then(res => {console.log(res);
}).catch(err => {console.log(err);
})

Vue axios基础相关推荐

❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
<Vue前端基础框架集合从入门到高级>,小白也可学文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
Vue的基础入门及使用
Vue的基础入门及使用第一章 Vue核心 1.1 Vue的基本认识 1.1.1 官网英文官网:https://vuejs.org/ 中文官网:https://cn.vuejs.org/ 1.1.2 ...
视频教程-Vue零基础到精通视频教程-Vue
Vue零基础到精通视频教程从事多年web前端开发和教育培训(线上)工作,主要从事web前端工作.php后端工作,在pc端和移动端开发都具有丰富经验,同事有响应式布局.vue框架开发.微信小程序开发经 ...
2018年最新Vue从基础入门到项目实战视频教程网盘学习地址
2018年最新Vue从基础入门到项目实战视频教程网盘学习地址: https://pan.baidu.com/s/15D6GiHnSgA5Eo0n9G5Ws1A 若网盘地址失效,可访问此地址(下单有网盘 ...
Vue.js基础知识
一.Vue.js是什么? 它是一套用于构建用户界面的渐进式框架.其设计为自底向上逐层应用.Vue只关心视图层. 二.声明式的渲染 1. Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DO ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
Vue+axios（interceptors）实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果...
axios interceptors 拦截器 //interceptors.js// vue axios配置发起请求加载loading请求结束关闭loading // http request 请求 ...
vue上传文件到php,vue+axios+php如何实现上传文件功能？,formdata上传文件附加参数...
vue+axios+php如何实现上传文件功能?Vue Axios PHP如何实现上传文件的功能?, 推荐:<PHP视频教程> 当我们提交表单时,我们经常会遇到一些表单提交要求.vue的a ...
[vue] axios是什么？怎样使用它？怎么解决跨域的问题？
[vue] axios是什么?怎样使用它?怎么解决跨域的问题? axios 的是一种异步请求,用法和ajax类似,安装npm install axios --save 即可使用,请求中包括get,po ...

Vue axios基础

Vue axios基础

Promise

axios的基本使用

axios的并发请求

axios实例化

axios模块化

拦截器

Vue axios基础相关推荐

最新文章

热门文章