Ajax 、Axios、Fetch 使用

前端常用接口请求，最先想到的是原生XHR和jquery ajax，通过使用xhr或者jquery ajax实现一个异步的http的请求。明显jquery的出现，原生xhr的已经慢慢被取代。

Jquery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

这是最简单的jquery ajax 请求的写法。一般正常基于实际项目开发，会做一些封装，代码如下:

//利用原生ajax进行接口处理
export const _baseAjax = (url,data) => {
  return new Promise((resolve,reject) => {
    function successCb(res) {
      if(res.retcode == 0) {
          resolve(res)
      }else if(res.retcode == 100) {
        alert('未登录')
      }else {
        reject(res)
      }
    }
    function errorCb(res) {
        alert('接口服务异常')
        reject(res)
    }
    $.ajax(Object.assign(
      {
        type:'post',
        url:url,
        dataType:'json',
        contentType:'application/json',
        cache:false
      },
      {
        data:JSON.stringify(data)
      },
      {
        success:successCb,
        error:errorCb
      }
      ))
  })
}

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Axios一些特点如下：
1）从浏览器中创建 XMLHttpRequests
2）从 node.js 创建 http 请求
3）支持 Promise API
4）可以拦截请求和响应，能够转换请求数据和响应数据
5）自动转换 JSON 数据
…
axios安装可以使用npm方法进行安装
实际项目中开发中主要是封装了post和get请求的两个方法:

//利用axios

export const basePost = (url,data) => {
  return axios.post(url,data)
}

export const get = (url, data) => {
  return axios.get(url, {params:data})
}

针对项目，对axios做了一些处理。比如设置允许携带证书，允许跨域。设置拦截器，能够对一些错误返回码做一些提示等等

const axios = require('axios')
//是否携带cookie
axios.defaults.withCredentials = true

//设置拦截器
axios.interceptors.response.use(
  res =>{
    let code = res.data.retcode
    if(code == 0) {
      return res.data //axios可以自动转为json格式数据
    }else {
      alert(code)
      return Promise.reject(res.data)
    }
  },
  error => {
    alert('网络错误～')
  }
)

fetch

//利用fetch进行接口调用
export const baseAjax = (url,body) => {
  let options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body:JSON.stringify(body),
    credentials: 'include'
  }
  return fetch(url,options)
         .then(checkStatus)
         .then(parseJSON)
}

function checkStatus(res) {
  console.log('res',res)
}

function parseJSON(res) {
  try {
    return res.json() //需要进行json返回
  }catch (err) {
    return {}
  }
}

对于使用fetch进行接口请求后，对于response需要单独进行json()处理。
以上三种就是前端项目中常用的接口请求方式，个人觉得axios对xhr封装的比较完善，一般用axios比较多。