Vuejs——前端学习日记（七）

Tony狗

于 2020-06-15 02:18:37 发布

阅读量193

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_41815035/article/details/106755244

版权

Vuejs——前端学习日记（七）

axios

axios

axios是一个异步请求的工具，与ajax很像。

了解axios

axios是基于promise对ajax的一种封装，ajax是对网页的一些数据进行局部刷新。
ajax为mvc服务，mvc是一种开发模式，m是数据模型，v是视图，c是控制器，用来控制视图来跳转，视图是给用户展示控制器端返回的数据渲染，也可以从视图发起请求回馈给控制器。
axios mvvm导致ajax不符合这个架构。

axios的基本使用

接口名	请求方式	请求参数
获取所有学生	get	无参
根据id获取学生	get	id string
获取所有学生	post	无参
根据名字获取学生	post	name string

使用默认方式发送无参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/getAllstudent'
}).then(res => {
  	console.log(res);
})
</script>

可以通过在axios对象里加入method属性来确定请求方式是get还是post：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/getAllstudent',
  	method:'get'
}).then(res => {
  	console.log(res);
})
</script>

使用axios发送get有参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/findStudentById?id=1',
  	method:'get'
}).then(res => {
  	console.log(res);
})
</script>

这种有参请求是将具体的参数id=1直接链接到url地址中，也可以用声明属性的方式来实现有参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/findStudentById',
  	params: {
      id: '1'
    },
  	method:'get'
}).then(res => {
  	console.log(res);
})
</script>

使用post方式发送无参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/pGet',
  	method:'post'
}).then(res => {
  	console.log(res);
})
</script>

post方式发送无参请求与get类似，只是method属性不同。
使用axios发送带有参数的post请求,params传递：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/findStudentByName',
  	params: {
      name: '张三'
    },
  	method:'post'
}).then(res => {
  	console.log(res);
})
</script>

这种方式等同于明文查找，直接将params的内容拼接到url上，这样会暴露用户隐私，所以不推荐。
使用axios发送带有参数的post请求,data传递：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
  	url:'http://localhost:9999/student/student/findStudentByName',
  	data: {
      name: '张三'
    },
  	method:'post'
}).then(res => {
  	console.log(res);
})
</script>

这种情况后台控制器接收到的name为null，因为axios使用post携带参数请求默认使用application/json。有三种解决方法：解决方式一：使用params属性进行数据传递（不推荐）；解决方式二：直接将data属性换为“name=张三”；解决方式三：服务器端给接收的参数加上@requestBody。

axios请求方式

axios的两种请求方式：get和post，除了使用上述的方法表示，还可以用比较简单的方法来表示。
使用axios.get方式发送无参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 axios.get('http://localhost:9999/student/student/getAllStudent').then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})
</script>

使用axios.get发送有参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 axios.get('http://localhost:9999/student/student/findStudentById',{params:{id:1}}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})
</script>

使用axios.post发送无参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 axios.post('http://localhost:9999/student/student/pGet').then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})
</script>

使用axios.post发送有参请求：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 axios.post('http://localhost:9999/student/student/findStudentByName',"name=张三").then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})
</script>

传递多个参数，每个参数间用&连接，如："name=张三&age=10"。
使用data传递数据，后台需要将axios自动转换的json数据转换为java对象，在对应的post方式有参函数中将参数添加@requestBody注解就好。

axios并发请求

axios的并发请求，就是当两个或多个请求都回来后再一并作处理。
在这里用到的是axios.all()方法：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.all([
  	axios.get('http://localhost:9999/student/student/getAllStudent'),
  	axios.get('http://localhost:9999/student/student/findStudentById',{params:{id:1}})
]).then(res => {	//请求成功相应的是一个数组
  	console.log(res[0])
  	console.log('--------')
  	console.log(res[1])
}).catch(err => {
  	console.log(ree)
})
</script>

在基本的并发请求方法中，请求成功的话得到的res是一个数组，里面存放着每一个请求的响应，通过spread将参数直接进行分割，就不需要通过数组下标进行截取了：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.all([
  	axios.get('http://localhost:9999/student/student/getAllStudent'),
  	axios.get('http://localhost:9999/student/student/findStudentById',{params:{id:1}})
]).then(
	axios.spread((res1,res2) => {
    console.log(res1),
    console.log(res2)
  })	
).catch(err => {
  	console.log(ree)
})
</script>

axios的全局配置

全局配置的思路：在axios的url属性里，前面的http://localhost:999/student/student/地址都是一样的，就只有后面的地址不一样，全局配置就是想把前面的共同地址给提取出来。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.defaults.baseURL='http://localhost:9999/student/student';//配置全局属性
	axios.defaults.timeout=5000;//超时时间
	axios.get('getAllStudent').then(res => { //在全局配置基础上去网络请求
    console.log(res);
  });
	axios.post('pGet').then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err);
  })
</script>

axios实例

创建axios实例，可以传入属于这个实例的配置参数。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  let newVar = axios.create({
    baseURL: 'http://localhost:9999/student/student',
    timeout: 5000
  });//创建axios实例
	newVar({
    url: 'getAllStudent'
  }).then(res => {
    console.log(res)
  })
</script>

axios拦截器

axios提供了两类拦截器，request请求方向和response响应方向的。请求可以分为成功请求和失败请求。

拦截器作用：用于在网络请求的时候，在发起请求或者响应时对操作进行响应的处理

功能：发起请求时可以添加网页加载的动画、强制登录；响应时可以进行响应的数据处理
请求拦截器：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.interceptors.request.use(config => {
  	console.log('进入请求拦截器');
  	console.log(config);
  	return config;	//不能只拦截不放行，需要添加return放行
},err => {	//拦截器里没有catch
  	console.log("请求失败");
  	console.log(err)
})
	
axios.get('http://localhost:9999/student/student/getAllStudent').then(res => {
    console.log(res);
  })
</script>

响应拦截器：

<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;	//不能只拦截不放行，需要添加return放行
},err => {	//拦截器里没有catch
  	console.log("响应失败");
  	console.log(err)
})
	
axios.get('http://localhost:9999/student/student/getAllStudent').then(res => {
    console.log(res);
  })
</script>

axios在Vue项目中的模块封装

在Vue项目中不可能只有一个网络请求，在面对多个请求时都先创建一个axios实例会非常的麻烦，而且在项目更新迭代的过程中也会遇到很多问题。
axios在Vue中的模块封装一共有四种方式，前三种方式为第四种方式的铺垫，建议使用第四种。

//封装位置	文件位置：./network/request/request.js
import axios from 'axios'
export function request (config, success, fail) {
    axios({
        url: config
    }).then(res => {
        success(res)
    }).catch(err => {
        fail(err)
    })
}
//调用位置
import {request} from './network/request/request'
request('http://localhost:9999/student/student/getAllStudent', res => {
  console.log(res)
}, err => {
  console.log(err)
})

//封装位置
import axios from 'axios'
export function request (config) {
    axios.defaults.baseURL = 'http://localhost:9999/student/student';
    axios(config.url).then(
        res => {
            config.success(res);
        }
    ).catch(err => {
        config.fail(err);
    })
}
//调用者位置
import {request} from './network/request/request'
request({
  url:'getAllStudent',
  success: res => {
    console.log(res);
  },
  fail: err => {
    console.log(err);
  }
})

//封装位置
import axios from 'axios'
export function request (config) {
    let newVar = axios.create({
        baseURL: 'http://localhost:9999/student/student',
        timeout: 5000
    });
    return new Promise((resolve, reject) => {
        newVar(config).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err)
        })
    })
}
//调用者位置
import {request} from './network/request/request'
request({
  url: 'getAllStudent'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err)
})

//封装位置
import axios from 'axios'
export function request (config) {
    let newVar = axios.create({
        baseURL: 'http://localhost:9999/student/student',
        timeout: 5000
    });
    return newVar(config);
}
//调用者位置

学习来源：bilibili.com/video/BV1QA411b7TR

Tony狗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vuejs——前端学习日记（七）

Vuejs——前端学习日记（七）axios了解axiosaxios的基本使用axios请求方式axios并发请求axios的全局配置axios实例axiosaxios是一个异步请求的工具，与ajax很像。了解axiosaxios是基于promise对ajax的一种封装，ajax是对网页的一些数据进行局部刷新。ajax为mvc服务，mvc是一种开发模式，m是数据模型，v是视图，c是控制器，用来控制视图来跳转，视图是给用户展示控制器端返回的数据渲染，也可以从视图发起请求回馈给控制器。axios mv
复制链接

扫一扫