axios和fetch区别与使用

前言

在JS中我们都是用AJAX发送异步请求，promise解决异步回调地狱的，后来产生的jq把ajax进行封装，根本上解决了兼容性问题，但还没有解决异步回调地狱的问题，最后官方直接封装fetch方法，不需要直接导入库直接使用（fetch = XMLHttpRequest + promise）
Vue2.0之后大部分人使用axios比较多，而axios也是基于ajax和promise封装的，但它比fetch更强大，下面就介绍一下它两的区别：
相同点：
1.都是项目用来发送异步请求的
2.都是基于XMLHttpRequest + promise
不同点：
1- axios是第三方封装的，fetch是官方封装的
2- axios更强（并发&拦截器 -> 写项目说）
3- fetch每次都需要then res.json()

它两的语法：

//GET
axios({
    method:"get"
    //方案1
    //url:"http://118.31.9.103/请求路径?参数1=值1&....&参数n=值n",
    //方案2（推荐）
    url:"http://118.31.9.103/请求路径",
    params: {键:值,...,键n:值n}
}).then(res => {
}).catch(error=>{
  console.log(error)
})
//POST
axios({
    url:"http://118.31.9.103/请求路径",
    method:"post",
    data:"参数1=值1&....&参数n=值n"
}).then(res => {
}).catch(error=>{
  console.log(error)
})

fetch(请求地址,{
 method: 请求方式,
 headers:{},
//body:"name=kerwin&age=100"
 body:JSON.stringify({
    数据1: 值1,
    数据n: 值n
 })
}).then(res=> res.json()).then(res=>{
 console.log(res);
})

在vue和react中可以在src中创建api/index.js

//1.引入axios模块
import axios from 'axios'
//2.全局配置
axios.defaults.baseURL = '请求地址'

//3.添加请求拦截器
// axios.interceptors.request.use(function (config) {
//     //1.获取token
//     let token = localStorage.getItem('token')
//     //2.判断
//     if (token) {
//         //设置请求头（后期请求接口 http请求头携带Authorization参数）
//         config.headers['Authorization'] = token
//     }
//     return config 
// }, function (error) {
//     // Do something with request error
//     return Promise.reject(error)
// })})
// 在实例已创建后修改默认值，比如请求时需要拿到token值
// instance.defaults.headers.common['token'] = token
// 自定义超时时间
axios.instance.defaults.timeout = 6000
// let token = localStorage.getItem('token') ||  '固定的'
// let token = localStorage.getItem('token')
// axios.defaults.headers.common['Authorization'] = token
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    //1.获取token
    var token = localStorage.getItem('token') 
    //2.判断
    if (token) {
        //设置请求头（后期请求接口 http请求头携带Authorization参数）
        config.headers['Authorization'] = token
    }
    return config
}, function (error) {
    // Do something with request error
    return Promise.reject(error)
})
// 每一次拿到数据都需要经过这里 - 添加响应拦截器
axios.instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么 --- 关闭loading动画
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})
// 语法
// GET      axios.get(请求路径，{params: 数据对象})   
//          axios.get(请求路径，{params: {uname:'aaa', pwd:'bbb'}})   
// POST     axios.post(请求路径，数据对象)   
// PUT      axios.put(请求路径，数据对象)   
// DELETE   axios.delete(`请求路径/${id}`)   

// 统一：HTTP请求动词+模块名


// export const login = postData => { // {username:'', password}
//     return axios.post('login', postData).then(res=>res.data)
// }