为什么不用:
相对于传统Ajax非常好用
为什么不用:
体积小,是官方退出的
为什么不用:
使用方便,有非常多优势,在后续中会详细说明
使用这个的主要原因往往是为了解决跨域访问的问题。
jsonp的核心在于通过标签的src来帮助我们请求数据,将数据当做JavaScript的函数来执行,并且执行过程中传入我们需要的json,封装jsonp的核心在于我们监听window上的jsonp进行回调时的名称
ajax i/o system
axios(config)
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])
npm install axios --save
安装后可以在项目任意位置使用axios
import axios from 'axios'
axios({
url:'http://httpbin.org/get',
method:'get'//请求方式
}).then(data =>{
console.log(data)
})
使用params
可以拼接url
params:{
type:'pop',
page:1
}
axios.all([axios({
url:'http://httpbin.org/get'
}),axios({
url:'http://httpbin.org/get'
})]).then(data=>{
console.log(data)
})
将两个结果进行分割,在then函数中使用axios.spread
.then(axios.spread((data1,data2))=>{
console.log(data1)
console.log(data2)
})
axios.default.timeout=5
设置超时时间,这里的时间是毫秒
url:'/user'
method:'get'
baseURL:'127.0.0.1:8080'
transfromRequest:[function(adta){}]
transformRespond:[function(data){}]
headers:{'x-Requested-With':'XMLHttpRequest'}
params:{id:12}
get请求会把params中的数据以?的形式拼接在后面responseType:'json'
每一个实例有自己的配置,不用使用全局的设定
const instance=axios.create()
instance({
timeout:5000,
baseURL:'...'
})
instance({
url:'...',
}).then((res)=>{
console.log(res)
})
每一个实例可以自己发送自己的请求处理数据
创建一个network目录,在目录下创建request.js文件,所有的网络请求通过这个文件
文件中配置请求的参数和回调函数success和failure
import axios from 'axios'
export function request(config,success,failure){
//创建axios的实例
const instance =axios.create({
timeout:5000
})
instance(config)
.then(res=>{
console.log(res)
success(res)
})
.catch(res=>{
console.log(res)
failure(res)
})
}
在需要发送请求的部分导入request
import {request} from '../network/request.js'
网络请求:
request({
url:'http://httpbin.org/get'
},res=>{
console.log(res)
},err=>{
console.log(err)
})
在request.js文件中:
import axios from 'axios'
export function request(config){
//创建axios的实例
return new Promise((resolve,reject)=>{
const instance =axios.create({
timeout:5000
})
instance(config)
.then(res=>{
// console.log(res)
resolve(res)
})
.catch(res=>{
// console.log(res)
reject(res)
})
})
}
返回一个Promise对象,因此还可以简化:
import axios from 'axios'
export function request(config,success,failure){
//创建axios的实例
const instance =axios.create({
timeout:5000
})
return instance(config)
}
这个instance是axios的实例,所以instance自己就是一个promise的对象,直接返回这个Promise对象就可以了
使用时:
request({
url:'http://httpbin.org/get'
}).then(res=>{
console.log(res)
}).catch(res=>{
console.log(res)
})
用于我们每次请求或者得到响应后们进行对应的处理
instance.interceptors.request.use(res=>{
//发送成功,把配置拦截下来
console.log(res)
//把配置信息还回去
return res
},err=>{
//没有发送出去,比如网络有问题的时候
console.log(err)
})
一般用在请求时要配置或者转化一些东西;还可以在每次发送请求时在界面显示一个请求的图标或者动画;还有一些网络请求(比如有些请求必须登录),必须携带一些特殊的信息
instance.interceptors.response.use(res=>{
//去除一些没有用的数据,只返回我们要的data
return res.data
},err=>{
console.log(err)
})