fetch axios async/await 接口调用


fetch

Fetch API

fetch基本特性

  • 相比Ajax更加简单地数据获取方式，功能更强大，更灵活，可以看作是传统Ajax升级版
  • 一个基本地fetch请求很简单，如下：
1
2
3
4
5
6
7
8
9
10
11
12
fetch(url)
  .then(function(response) {
    return response.text();
  })
  .then(function(data) {
    console.log(data);
  });
  /*
  第一个then方法获取数据，但不可以直接拿到数据
  返回值是一个Promise对象，这个返回值不管请求是否成功都返回一个Promise对象
  第二个then就可以直接拿到数据使用
  */
  • fetch接受第二个可选参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
fetch(url, {
   // 设置发送请求方式
   method: 'POST',
   
   //处理发送请求的json数据
   body: JSON.stringify(data),
   
   // 设置请求头
   headers: {
     'content-type': 'application/json' // 数据格式
   },
   
   //包含请求的缓存模式 (default, reload, no-cache)
   cache: 'no-cache',

   //包含请求的模式 (cors, no-cors, same-origin, navigate)
   //no-cors: 常用于跨域请求不带CORS响应头场景
   //cors表示同域和带有CORS响应头的跨域下可请求成功
   mode: 'cors'
 })
 .then(response => response.json())
 .catch(error => console.log(error))
 .then(response => console.log(response));

axios

下载地址

  • Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

axios特性

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

axios基本用法

1
2
3
4
5
6
axios.get('url')
      .then((data) => {
        // data属性名是固定的，用于获取后台响应的数据
        console.log(data.data)
      })
  // 这个then返回的data是一个axios对象，改对象里有个data属性，值是响应的data数据

axios响应结果

响应结果的主要属性

  • data：实际响应回来的数据
  • hearders：响应头信息
  • status：响应状态码
  • statusText：响应状态信息

axios 的全局配置

1
2
3
4
5
6
7
8
9
10
11
12
13
axios.defaults.timeout = 3000; //超时时间
axios.defaults.baseURL = 'http://localhost:3000' //默认地址
axios.defaults.headers['mytoken'] = 'hello' //设置请求头，请求头会多出一个mytoken属性，值为hello

// 表单数据的提交
// 表单数据
      var params = new URLSearchParams();
      params.append('uname','XiaoPan')
      params.append('pwd','123456789')
      axios.post('/axios',params) // 这个请求地址 /axios 会自动拼接上面设置的默认地址，再发送请求
            .then(ret => {
              console.log(ret.data);
            })

axios拦截器

  • 请求拦截器
    （在请求发送之前设置一些信息）
1
2
3
4
5
6
7
8
// 请求拦截器
    axios.interceptors.request.use(function(config){
      console.log(config.url); // 打印请求地址
      config.headers.mytoken = 'nihao' // 给请求偷添加一个属性mytoken值为‘nihao’
      return config  // 一定要return，返回一个对象
    },function(err){
      console.log(err);
    })
  • 响应拦截器
    （在获取数据之前对数据做一些加工处理）
1
2
3
4
5
6
7
//响应拦截器
    axios.interceptors.response.use(res => {
      console.log(res); // axios对象
      return res.data // 数据处理
    },(err) => {
      console.log(err);
    })

async/await

async function

async/await 的基本用法

  • async/await是es7引入的新语法，可以更加方便地进行异步操作
  • async关键字用于函数上 （async函数地返回值是Promise实例对象）
  • await关键字用于async函数中（await可以得到异步地结果）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    axios.defaults.baseURL = 'http://localhost:3000'

    axios.get('/adata').then(data => {
      console.log(data.data);
    })

    async function queryData(){
      return await axios.get('/adata')
    }  // async 返回的是一个Promise实例对象
    queryData().then(data => {
      console.log(data);
    })
   
    // await后面也可以是一个Promise实例对象
    async function Data(){
      return await new Promise((resolve,reject) => {
        setTimeout(() => {
          resolve('hhhh')
        },1000)
      })
    }
    queryData().then(data => {
      console.log(data);   // 1s后打印 hhh
    })
  • async/await发送多个异步请求,且输出顺序会根据你的await先后输出
1
2
3
4
5
6
7
8
9
// 多个异步请求
    async function aa(){
      const info = await axios('/async1').data
      const data = await axios('/async2?info='+ info)
      return data
    }
    aa().then(data => {
      console.log(data.data);
    })