浅谈axios和vue-axios的关系及fetch基本使用

什么是axios？

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

案例以get请求为例

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

以post请求为例

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

别名
如果多个axios使用axios.all([ ]).then(axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2)}))通过axios的spread方法拿到每个结果

axios封装+拦截器

export function request(config) {
    const axiosA = axios.create({
      baseURL:"static/data/homeData",
      timeout:5000
    })
    //请求时拦截
    axiosA.interceptors.request.use(config=>{
    	console.log(config)
    	return config
    },err=>{
    	console.log(err)
    })
    //响应时拦截(返回时拦截)
    axiosA.interceptors.response.use(res=>{
	console.log(res)
	return res.data
	})
    return axiosA(config)
}

vue-axios

基于vuejs 的轻度封装

以下三种方式使用

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

fetch基本使用

fetch(url)
	.then(response =>{
	return response.json()
	})
	.then(data =>{
	console.log(data)
	})