axios简单介绍

axios简单介绍

axios的配置，get,post,axiso的同步问题解决

一.缘由

　　vue-resoure不更新维护，vue团队建议使用axios。

二.axios安装

　　1、利用npm安装npm install axios --save-dev

　　2、利用cnpm安装npm install axios --save  //taobao源
　　3、利用bower安装bower install axios --save
　　4、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三.示例

　　1、 发送一个GET请求

　　

 1 //将请求参数挂载到请求的url中的形式
 2 axios.get('/user?id=123&page=1').then(function(response){
 3     console.log(response);//请求正确时执行的代码
 4 }).catch(function (response){
 5     console.log(response);//发生错误时执行的代码
 6 });
 7 
 8 //将请求参数单独的params属性传入的形式
 9 axios.get('/user', {
10     params : { //请求参数
11         id : 123,
12        page:1
13     }
14 }).then(function(response){
15     console.log(response);//请求正确时执行的代码
16 }).catch(function(response){
17     console.log(response);//发生错误时执行的代码
18 });        

　　　2.发送一个post请求

　　

 1 axios({
 2           method: "post",
 3           url: "/api/history/query",
 4           headers: {
 5             "Content-Type": "application/json"  //限制传输数据类型
 6           },
 7           data: {
 8              "firstName": "Fred",
 9              "lastName": "Flintstone"
10           } //传输的json数据
11 }).then(function(response){
12    console.log(response);    //发生成功时执行的代码
13 }).catch(function(response){
14     console.log(response);    //发生错误时执行的代码
15 })        

        3.一次并发多个请求

　　

 1 function getUserAccount(){
 2    return axios.get('/user/12345');
 3 }
 4 function getUserPermissions(){
 5    return axios.get('/user/12345/permissions');
 6 }
 7 axios.all([getUserAccount(),getUserPermissions()])
 8 .then(axios.spread(function(getUserAccount,getUserPermissions){
 9     console.log(getUserAccount)　
10     console.log(getUserPermissions)　　
11     //getUserAccount是getUserAccount()成功后函数返回的值 
12     //getUserPermissions是getUserPermissions()成功后函数返回的值
13 })); 

 

四.axios的API

(1)axios可以通过配置（config）来发送请求

1 //发送一个"POST"请求
2 axios({
3     method:"POST",
4     url:"/user/123",
5     data:{
6         "first":"hello",
7         "last":"world"
8     }
9 })

 

　　

 

posted @ 2019-04-17 11:15 或许这就是生活 阅读( ...) 评论( ...) 编辑 收藏