学习axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

axios 的github地址:https://github.com/axios/axios

中文网地址:http://www.axios-js.com/

发送请求基本用法:

GET请求的例子

// 通过url可以传递参数
axios.get('/test2?name=哈哈&age=18', {
  // 通过params也可以传递参数
  params:{
    sex: '男'
  }
})
//发起一个get请求.then
  .then(res => {
  console.log(res);
})
//这里使用箭头函数是为了防止this发生改变,因为箭头函数没有this

DELETE请求的例子

delete请求和get请求传参方式基本一样,不过一般delete用在restful风格的API上,URL会稍有不同

// 通过url可以传递参数
axios.delete('/test2?name=哈哈&age=18', {
  // 通过params也可以传递参数
  params:{
    sex: '男'
  }
})
  .then(res => {
  console.log(res);
})

POST请求的例子

post请求的传参可以有两种方式

方式1:

// 通过构造一个URLSearchParams对象传递
// let params = new URLSearchParams('name=如花&age=20');
let params = new URLSearchParams({
  name: '哈哈',
  age: 18
})
// URLSearchParams实例可以后续继续追加内容
params.append('sex', '男');
// 在第二个参数中将数据传递过去
axios.post('/test', params)
  .then(res => {
  console.log(res);
})

方式2:

// 直接在第二个参数中传递一个对象用来传参
// 不过这种方式,发送的请求的content-type:application/json 
// 所以需要服务端能解析传递的json类型的数据
axios.post('/test', {
  name: '哈哈',
  age: 18
})
  .then(res => {
  console.log(res);
})

PUT请求的例子

put请求传参的方式和POST请求传参的方式几乎一模一样,前面写的几中post的传参方式是一样的

let params = new URLSearchParams({
  name: '哈哈',
  age: 18
})
// URLSearchParams实例可以后续继续追加内容
params.append('sex', '男');
// 在第二个参数中将数据传递过去
axios.put('/test', params)
  .then(res => {
  console.log(res);
})

常见全局配置

所谓全局配置就是指,在请求发送之前对请求进行一个整体性的配置,常见的配置项有:

  1. timeout 超时时间,请求发出后,多少毫秒后未得到响应,就按超时处理

    axios.defaults.timeout = 2000
    
  2. baseURL 默认的请求地址前缀

    // 设置baseURL, 那么请求发出的地址就是:http://www.baidu.com/xxx/test
    axios.defaults.baseURL = 'http://www.baidu.com/xxx'
    axios.get('/test', params)
      .then(res => {
      console.log(res);
    })
    
  3. headers 对请求头的一些设置

    axios.defaults.headers['xxx'] = '6666'
    

拦截器

axios的拦截器分为请求拦截器和响应拦截器两种

请求拦截器

请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么,例如加入token
  // 这里我们可以添加一些配置
  console.log(config);
  config.headers['xxxx'] = '888888';
    // 别忘了返回config
  return config; 
}, function (error) {
  // 对请求错误做些什么处理
  // Promise.reject(reason)方法 可以返回一个带有拒绝原因reason参数的Promise对象。
  return Promise.reject(error);
});
响应拦截器

响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页

axios.interceptors.response.use(function (response) {
  // 在接收响应做些什么,例如跳转到登录页
  // 这里可以对响应的信息做一些处理
  return response; // 别忘了返回response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读