Axios入门到封装

Kingsbug
265 阅读3分钟

一、axios

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

ajax———MVC

axios———MVVM

二、axios的基本使用

1、使用默认方式发送请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    axios({
          url:'接口地址'
}).then(res => {
    console.log(res)
})
</script>

//默认使用 get方式进行请求

2、get方式发送无参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    axios({
          url:'接口地址',
          method:'get'
}).then(res => {
    console.log(res)
})
</script>

3、get方式发送携带参数请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//可以直接在接口后以value的方式书写
<script>
    axios({
          url:'接口地址?id=1',
          method:'get'
}).then(res => {
    console.log(res)
})
</script>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//也可以的定义params的方式书写
<script>
    axios({
          url:'接口地址',
          methods: 'get'
          params: {
              id: '1'
          }
}).then(res => {
    console.log(res)
})
</script>

4、post方式发送无参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    axios({
          url:'接口地址',
          method:'post'
}).then(res => {
    console.log(res)
})
</script>

5、post方式发送携带参数请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    axios({
          url:'接口地址',
          method:'post',
          params:{
             id:'1'
          }
}).then(res => {
    console.log(res)
})
</script>

6、使用axios发送带有参数的post请求，使用data传递

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    axios({
          url:'接口地址',
          method:'post',
          data:{
             name:'Tom'
          }
}).then(res => {
    console.log(res)
})
</script>
//后台控制器收到的name结果为null,axios使用post携带参数请求默认使用application/json
//解决方式一： params属性进行数据传递
//解决方式二： “name=Tom”
//解决方式三： 服务器端给接收的参数加上@requestBody

三、axios请求方式

1、使用axios.get方式发送无参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get('接口地址').then(res => {
         console.log(res);
}).catch(err => {
         console.log(err);
})
</script>

2、使用axios.get方式发送有参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get('接口地址',{params:{id:1}}).then(res => {
         console.log(res);
}).catch(err => {
         console.log(err);
})
</script>

3、使用axios.post方式发送无参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.post('接口地址').then(res => {
         console.log(res);
}).catch(err => {
         console.log(err);
})
</script>

4、使用axios.post方式发送有参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.post('接口地址',"name=Tom&age=10").then(res => {
         console.log(res);
}).catch(err => {
         console.log(err);
})
</script>
//发送post请求携带参数，直接使用"name=Tom&age=10",多个参数用&连接

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//使用data传递对象，后台需要将axios自动转换的json数据转换为java对象
//修改后台代码
<script>
    axios.post('接口地址',{name='Tom'}).then(res => {
         console.log(res);
}).catch(err => {
         console.log(err);
})
</script>
//接收参数添加@requesBody注释

四、axios实例

1、axios的并发请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.all([
       axios.get('接口地址1'),
       axios.get('接口地址2', {params:{id:1}})
    ]).then(res => {
      //请求成功响应的是一个数组
         console.log(res[0]);
         console.log(res[1]);
}).catch(err => {
         console.log(err);
})
</script>

2、使用spread方法处理响应数据结果

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.all([
       axios.get('接口地址1'),
       axios.get('接口地址2', {params:{id:1}})
    ]).then(
        axios.spread(res1,res2)=>{
         console.log(res1);
         console.log(res2);
}).catch(err => {
         console.log(err);
})
</script>

五、axios的全局配置

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.default.baseURL='接口地址';//配置全局属性
    axios.default.timeout=5;

    axios.get('getAll').then(res => {    //在全局配置的基础上去网络请求
        console.log(res);
});
    axios.post('pGet').then(res => {
        console.log(res);
}).catch(err => {
        cosole.log(err)
})
</script>

六、axios实例

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let newVar = axios.create({
        baseURL:'http://接口地址',
        timeout:5000
});//创建axios实例
    let newVar1 = axios.create({
        baseURL:'http://接口地址',
        timeout:5000
});//创建axios实例

newVar({
    url:'getAll'
}).then(res=>{
    console.log(res)
})

newVar1({
    url:'getAll'
}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})
</script>

七、axios的拦截器

axios提供了两大类拦截器，一种是请求方向的拦截（成功请求，失败的），

另一种是响应方向的（成功的，失败的）

拦截器的作用：用于网络请求的时候在发起请求或者响应时对操作进行响应的处理发起请求时可以添加网页加载的动画  强制登录 响应的时候可以进行相应的数据处理

1、请求方向拦截器

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//拦截器
    axios.interceptors.request.use(config => {
        console.log('进入请求拦截器');
        console.log(config);
        return config;//放行请求
    },err => {
        console.log('请求方向失败');
        console.log('err');
    });
//axios请求
    axios.get("接口地址").then(res => {
        console.log(res);
    })

</script>

2、响应方向拦截器

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//拦截器
    axios.interceptors.response.use(config => {
        console.log('进入请求拦截器');
        console.log(config);
        return config.data;//放行请求
    },err => {
        console.log('响应方向失败');
        console.log('err');
    });
//axios请求
    axios.get("接口地址").then(res => {
        console.log(res);
    })

</script>

八、axios在vue中的模块封装

1、npm安装axios

npm install axios

2、在vue-cli快速搭建好的vue项目根目录下src文件夹内新建request.js

3、单独创建实例，拦截器

//请求处理路径:@/utils/requestimport axios from 'axios'import router from './src/router'import Vue from 'vue'
//创建axios请求实例
const http = axios.create({  baseURL: "http://112.74.99.5:3000/web/api"})
//请求方向拦截器
http.interceptors.request.use(function (config) {  if (localStorage.getItem('token') && localStorage.getItem('id')) {    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')  }  return config;}, function (error) {  return Promise.reject(error);});
//响应方向路由器
http.interceptors.response.use(function (response) {  return response;}, function (error) {  if (error.response.status == 401 || error.response.status == 402) {    router.push('/login')    Vue.prototype.$msg.fail(error.response.data.message)  }  return Promise.reject(error);});//导出http请求实例export default http

4、最后在api下引入http实例遍历API方法

//引入实例
import http from '@/utils/request'export function getApi(data) {  return http({    url: '后端提供接口',    methods: 'post', //请求方式get或者post    data            //getApi(data)中的data是携带的参数，无参可以为空  })}

八、qs和json的区别（补充）

1、qs是将数据序列化成

name='zs'&age = 18

2、json的想序列化是

'{"name":"zs","age":"18"'}'

3、使用qs插件

首先安装依赖npm insatll axios qs

//请求处理路径:@/utils/request
import axios from 'axios'
import qs from 'qs'

// 转换请求方式
axios.defaults.transformRequest = [function(data) {
  const str = qs.stringify(data, { allowDots: true })
  console.log('transformRequest', str)
  return str
}]
之后开始创建axios实例、拦截器、导出
然后使用

以上就是对axios的入门到实际开发中的使用总结，具体在创建实例时还分有qs和json两种数据方式的插件区别。

avatar
文章
阅读
粉丝