在Vue中使用axios 实现异步请求
1.首先要安装axios的环境我们可以在终端输入npm install axios@"^0.26.1" --save来下载我们需要的环境。下载完成后到里查看我们的环境是否配置成功当我们出现这个时就说明我们的环境配置成功2.配置 axios 包括创建实例对象 封装常用方法在src目录下,创建axios文件夹,文件夹中创建index.js文件在这个js中我们应该进行创建相应的实例2.1首先创建一个实例
1.首先要安装axios的环境
我们可以在终端输入
npm install axios@"^0.26.1" --save
来下载我们需要的环境。
下载完成后到
里查看我们的环境是否配置成功
当我们出现这个时就说明我们的环境配置成功
2.配置 axios 包括创建实例对象 封装常用方法
在src目录下,创建axios文件夹,文件夹中创建index.js文件
在这个js中我们应该进行创建相应的实例
2.1首先创建一个实例
import axios from "axios";
let api = axios.create({
timeout:500000
})
2.2响应拦截器 ,返回的响应如果有错误,返回错误
api.interceptors.response.use(response=>{
return response;
},(error)=>{
return error.response;
})
2.3封装一个方法get
url 异步请求地址
api.doGet = async (url) =>{
let{data} = await api.get(url);
return data;
}
2.4请求方式
api.doPost = async (url, param)=>{
let{data} = await api.post(url);
return data;
}
2.5导出
export default api;
以上就是在js中的设计。完整如下图。
3.在main.js中添加axios的依赖 -有两种方法
3.1第一种 注册全局 **也是最好用的
import Axios from "./axios/index.js"
Vue.prototype.$api = Axios;
在Vue中的使用样式 不需要导入axios
async getStudent(){
//异步请求获取课程的所有数据
let data = await this.$api.doGet("/data/student.json");
this.student_list = data;
}
注意:****必须把数据文件放在public文件夹下
3.2第二种 原生的
import axios_local from "axios"
Vue.use(axios_local);
在script中导入
import axios from "axios"
使用方式
axios.create({timeout:500000 }).get("./data/course.json")
以上就是axios的两种使用方式
注意:发起axios异步请求的时候,如果想要接受返回值时,必须加一个awite关键字,定义方法为async
华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。
更多推荐
所有评论(0)