为什么要封装axios:
有时候一个项目可能会有很多操作,比如测试环境的,生产环境的,他们的ip地址前缀都一样,这时候我们使用他们的时候只需要改后缀就行,非常方便。请求数据的时候也不用多次写代码,只需要改下自己所要获取数据的参数就行。
步骤:首先创建一个api文件夹专门用来封装Axios的,然后再在Api文件夹里再建一个文件夹存放baseURL的,也就是网址的域名(网址最前面那一段),然后还要再api文件夹中再创建一个文件夹用来存放后面那段网址。最后才能拼接成一段网址。
**参数resolve和reject的作用:****是将Promise中函数要传递的值,作为参数传给后面的then和catch中函数。
resolve(值1)把值1传给promise,然后再由promise把值1传给then(function(值1));reject(值2)把值2给promise,然后再由promise把值2传给catch(function(值2))。
axios.create():创建一个新的axios发请求。
存放baseURL文件夹中的js文件的代码:
get请求的代码:
import axios from "axios";
const instances=axios.create({
baseURL:'http://poetry.apiopen.top',
timeout:1000,
})
export default instances;
post请求的代码:
import axios from "axios";
const instance=axios.create({
baseURL:'https://api.apiopen.top',
timeout:1000,
})
//发送真正的网络请求
export default instance//相当于return Promise
首先导入axios,然后创建一个axios实例发请求,instance可以根据情况随便命名。
存放后面部分url文件夹中的js文件的代码:
get请求的代码:
import instances from "../../network/request";//导入刚刚创建的axios实例
export function userAPI(query) {
return instances({
url: '/poetry',
method:'get',
params: query
})
}
post请求的代码:
import instance from "../../network/request1";
export function userApipost(query1) {
return instance({
url:'/getJoke',
method:'post',
params:query1,
})
}
首先导入baseURL里创建的axios实例,然后导出自己的配置函数。
query和query1就是用来接收数据的形参。
组件里发送请求的例子:可以写在钩子函数mounted里
get请求源代码:
import {userAPI} from "./api/name/nameAPI";//导入自己的在前面命名的函数
//get请求
userAPI({
page:'1',
count:'2'
},)
.then(res=>{
console.log('get请求')
console.log(res.data.result)
})
.catch(error=>{
console.log(error)
})
post请求源代码:
import {userApipost} from "./api/name/nameApIpost";
//post请求
userApipost({
type:'all',
page:'0',
count:'3'
},)
.then(res=>{
console.log('post请求')
console.log(res.data.result)
})
.catch(error=>{
console.log(error)
})
这里面想要请求什么数据只需要改变自己想要获取的参数名就行。
.then和.catch都是promise里的固定写法。