您的位置:首页 > 理论基础 > 计算机网络

axios网络请求

2020-03-31 07:44 1171 查看

为什么选择axios?

功能特点:

  • 在浏览器中发送 XMLHttpRequests 请求
  • 在 node.js 中发送 http请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据

支持多种请求方式:
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]])

安装axios

npm install axios  --save
执行axios请求
axios({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'get'   //默认get请求
}).then( res => {
console.log(res);

})
执行get 请求
axios.get('http://123.207.32.32:8000/api/wh/category', {
params: {   //参数 pramas对象
type: 'sell',
page: 3
}
}).then(res => {
console.log(res);

})
执行post 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
同时发起多个请求
axios.all([
axios.get('http://123.207.32.32:8000/api/wh/category'),
axios.get('http://123.207.32.32:8000/home/multidata')
]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
全局配置

在上面的示例中, 我们的BaseURL是固定的
事实上, 在开发中可能很多参数都是固定的.
这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

//提取全局配置 baseURL公共路径
axios.defaults.baseURL='http://123.207.32.32:8000';
axios.defaults.timeout = 1000

axios.all([
axios.get('api/wh/category'),
axios.get('home/multidata', {
params: {
type:'sell',
page: 1
}
})
]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))

常用配置:

axios的实例

为什么要创建axios的实例呢?
当我们从axios模块中导入对象时, 使用的实例是默认的实例.
当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样.(比如请求服务器不是同一个)
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

//创建实例
const instans1 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})

//发送网络请求
instans1({
url: 'home/multidata',
method: 'get',
params: {
type:'sell',
page: 1
}
}).then(res => {
console.log(res);

})
axios封装

在src文件下单独创建文件夹network用于存放请求数据方面配置,创建axios.js文件进行封装

//引入 axios框架
import axios from 'axios'

// 导出 request 方法
export function request(config) {
// return new  Promise((resolve, reject) => {
//     // 创建axios实例
//     const instance1 = axios.create({
//         baseURL: 'http://123.207.32.32:8000',
//         timeout: 5000
//     })
//     //请求数据
//     instance1(config).then(res => {
//         resolve(res)
//     }).catch(error => {
//         reject(error)
//     })
// })

//简写:
//创建axios实例
const  instance1 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
//请求数据
return instance1(config)  // 使用实例时返回的数据就是一个promis.只需要把instance1(config)返回即可
}

组件调用

created() {
request({
url: 'home/multidata',
parmas: {
type: 'sell',
page: 1
},
method: 'get'
}).then(res => {
console.log(res);

}).catch(err => {
console.log(err);

})
},

axios拦截器

axios提供了拦截器,用于我们在发送每次请求或者得到相应后,进行对应的处理。
如何使用拦截器呢?

  1. 发送请求时拦截
// 1.数据请求时拦截
instance1.interceptors.request.use(config => {
console.log(config);
console.log('来到了request拦截success中');
// 数据拦截应用:
// 1.比如config中有些数据不符合服务器要求
// 2.每次发送请求时,希望在界面显示一个请求中的状态图标
// 3.某些网络请求(如登录token),必须携带一些特殊信息
return config  //拦截修改后返回数据(放行)
}, err => {
console.log(err);
console.log('来到了request拦截err中');
return err
})
  1. 响应数据时拦截
    响应的成功拦截中,主要是对数据进行过滤。
// 2.响应拦截
instance1.interceptors.response.use(res => {
console.log(res);
console.log('来到了response拦截success中');
return res.data  //数据处理
}, err => {
console.log(err);
console.log('来到response拦截’error中');
return err.data
})

响应的失败拦截中,可以根据status判断报错的错误码,跳转到不同的错误提示页面。

console.log('来到response拦截’error中');
if(err && err.response) {
switch(err.response.status) {
case 400:
err.message = '请求错误';
break;
case 401:
err.message = "未经授权";
break;
}
}
return err.data
})
  • 点赞
  • 收藏
  • 分享
  • 文章举报
webxiaoliu 发布了16 篇原创文章 · 获赞 1 · 访问量 244 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: