axios基本使用

axios是基于promise对ajax的一种封装

基本使用

一.get请求

指定请求方式get【无参】请求

默认就是get方式请求，声明method:"post"就是post方式

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:'http://192.168.2.2:8520/api/message'，
    	method:'get'
    }).then(res=>{
        console.log(res);
    })
</script>

axios发送get【有参】请求

    axios({
        url:'http://localhost:8520/api/showid?content=1',
    }).then(res=>{
        console.log(res);
    });

axios携带参数发送get【有参】请求

axios({
        url:'http://localhost:8520/api/showid',
        params:{
            content:'1'
        }
    }).then(res=>{
        console.log(res);
    });

二.post请求

指定请求方式post【无参】请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:'http://192.168.2.2:8520/api/message'，
    	method:'post'
    }).then(res=>{
        console.log(res);
    })
</script>

axios发送post【有参】请求

axios({
        url:'http://localhost:8520/api/showid',
        method:'post',
        params:{
            content:'1'	//在url上拼接上了name参数（不安全，不推荐）
        },
    }).then(res=>{
        console.log(res);
    })

axios发送post【有参】请求，使用data传递

axios({
        url:'http://localhost:8520/api/showid',
        method:'post',
        data:{
            content:'1'	//后台控制器接受为null
        },
    }).then(res=>{
        console.log(res);
    })

后台控制器接收到的是content null，axios使用post携带参数请求默认使用application/json

解决方式一：params属性进行数据传递

解决方式二：’content=1’

解决方式三：服务器端给接收的参数加上@requestBody

三.axios请求方式（简写）

使用axios.get方式发送发送【无参】请求

axios.get('http://localhost:8520/api/message').then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

使用axios.get方式发送发送【有参】请求

axios.get('http://localhost:8520/api/showid',{params:{content:1}}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

使用axios.post方式发送发送【无参】请求

axios.post('http://localhost:8520/api/message').then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

使用axios.post方式发送发送【有参】请求

多个参数用&链接，如：content=1&age=10

axios.post('http://localhost:8520/api/showid',"content=1").then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

四.axios并发请求

第一种方法：

axios.all([
    axios.get('http://localhost:8520/api/message'),
    axios.get('http://localhost:8520/api/showid')
]).then(res=>{
    console.log(res[0],res[1]);
}).catch(err=>{
    console.log('失败');
})

第二种方法：使用spread方式处理相应数组结果（推荐）

axios.all([
    axios.get('http://localhost:8520/api/message'),
    axios.get('http://localhost:8520/api/showid')
]).then(
    axios.spread((res1,res2)=>{
        console.log(res1);
        console.log(res2);
    })
).catch(err=>{
    console.log('失败');
})

五.axios全局配置

axios.defaults.baseURL='http://localhost:8520/api';//配置全局属性
axios.defaults.timeout=5000;
axios.get('message').then(res=>{//在全局配置的基础上去网络请求
    console.log(res);
});
axios.post('message').then(res=>{
    console.log('pass');
}).catch(err=>{
    console.log('fail');
})

六.axios实列

let newVar = axios.create({
        baseURL:'http://localhost:8520/api',
        timeout:5000
    });
    let newVar2 = axios.create({
        baseURL:'http://localhost:8520/api',
        timeout:5000
    });
    newVar({
        url: 'showid',
        params:{
            content:1
        }
    }).then(res=>{
        console.log(res);
    });
    newVar2({
        url:'message'
    }).then(res=>{
        console.log(res);
    });

七.axios拦截器

类别

axios给我们提供了两大类拦截器，第一种是【请求】方向的拦截（成功请求和失败），另一种是【响应】方向的拦截（成功请求和失败）。

拦截器的作用

用于我们在网络请求的时候在发起请求或者响应时对操作进行相应的处理。发起请求时可以添加网页加载的动画。响应的时候可以进行相应的数据处理。

使用:

请求方向

axios.interceptors.request.use(config=>{
    console.log('进入请求拦截器');
    console.log(config);
    return config.data;//一定记得放行请求
},err=>{
    console.log('请求方向失败');
    console.log(err);
});

axios.get('http://localhost:8520/api/message').then(res=>{
    console.log(res);
})

响应方向

axios.interceptors.response.use(config=>{
    console.log('进入响应拦截器');
    return config.data;//一定记得放行请求
},err=>{
    console.log('响应方向失败');
    console.log(err);
});

axios.get('http://localhost:8520/api/message').then(res=>{
    console.log(res);
})

八.axios在vue中的模块封装

使用webpack安装axios:

npm install axios --save

第一种：

封装位置

//封装文件位置./network/request/request.js
import axios from 'axios'
export function request(config,access,fail){
    axios({
        url:config
    }).then(res=>{
        access(res);
    }).catch(err=>{
        fail(err)
    })
}

调用位置

//调用文件位置main.js
import {request} from "./network/request/request";

request('http://localhost:8520/api/message',res=>{
  console.log(res);
},err=>{
  console.log(err);
})

第二种：

封装位置

//封装文件位置./network/request/request.js
import axios from 'axios'
export function request(config){
    axios.defaults.baseURL='http://localhost:8520/api'
    axios(config.url).then(res=>{
        config.success(res);
    }).catch(err=>{
        config.fail(err);
    })
}

调用位置

//调用文件位置main.js
import {request} from "./network/request/request";

request({
  url:'message',
  success:res=>{
    console.log(res);
  },
  fail:err=>{
    console.log(err);
  }
})

第三种：

封装位置

//封装文件位置./network/request/request.js
import axios from 'axios'

export function request(config) {

    let newVar = axios.create({
        baseURL: 'http://localhost:8520/api',
        timeout:5000
    });

    return new Promise((resolve,reject)=>{
        newVar(config).then(res=>{
            resolve(res);
        }).catch(err=>{
            reject(err);
        })
    })

调用位置

//调用文件位置main.js
import {request} from "./network/request/request";

request({
  url:'message'
}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})

第四种：最简单（推荐）

封装位置

//封装文件位置./network/request/request.js
import axios from 'axios'

export function request(config) {

    let newVar = axios.create({
        baseURL: 'http://localhost:8520/api',
        timeout:5000
    });
     return newVar(config);
}

调用位置

//调用文件位置main.js
import {request} from "./network/request/request";

request({
  url:'message'
}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})

我当前使用的配置文件

{
  "picBed": {
    "current": "gitee",
    "uploader": "gitee",
    "gitee": {
      "branch": "master",
      "customPath": "yearMonth",
      "customUrl": "",
      "path": "images/",
      "repo": "zhouzhangjian/typora_images",
      "token": "02b88706fdacfe8b099780ed6a0c0e3d"
    },
    "transformer": "path"
  },
  "picgoPlugins": {
    "picgo-plugin-gitee-uploader": true,
    "picgo-plugin-github-plus": true
  },
  "picgo-plugin-gitee-uploader": {
    "lastSync": "2020-04-30 01:41:13"
  },
  "picgo-plugin-github-plus": {
    "lastSync": "2020-04-07 11:09:08"
  }
}