vuejs学习7.2 axios基本使用

axios请求方式

axios(config):默认为get请求
axios.get(),axios.post(),axios.delete()等等

axios使用

安装

npm install axios --save

简单使用

导入axios，然后调用，默认为get请求

import axios from 'axios'
axios({
  url:'http://123.1.1.213:8000/home',
  //专为get请求进行拼接
  params:{
    type:'123',
    page:1
  }
}).then(res=>{
  console.log(res);
})

axios发送并发请求

//axios发送并发请求
axios.all([
  axios({
    
  }),
  axios({

  })
]).then(results =>{
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})
或者使用
.then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2);
}))

只有两个同时完成后才能调用then

全局配置

设置全局配置

axios.defaults.baseURL = "http://123.1.1.3"
axios.defaults.timeout = 1000

常见的配置选项

url,method,baseURL,transformRequest,transformRespose,headers,params,timeout,等
如果post，后面使用data
如果get，后面使用params

axios实例

const axiosinstace = axios.create({
  baseURL:"http://123.1.1.3:8000",
  timeout:1000
})
axiosinstace({
  url:'/home/data',
  params:{
    type:'123'
  }
}).then(res =>{
  console.log(res);
})

每一个实例有自己独立的配置

axios封装

src下建立一个newwork文件夹，里面添加文件配置axios

import axios from 'axios'
export function insance1(config,success,failure) {
  //创建实例
  const instance = axios.create({
    baseURL:'http://123.1.1.1',
    timeout:1000
  })
  //发送请求
  instance(config).then(res =>{
    success(res)
  }).catch(err =>{
    failure(err)
  })
}

import {insance1} from './network/request'
insance1({
  url:'/home'
},res=>{
  console.log(res);
},err=>{
  console.log(err);
})

可以使用Promise

import axios from 'axios'
export function insance1(config,success,failure) {
  //创建实例
  const instance = axios.create({
    baseURL:'http://123.1.1.1',
    timeout:1000
  })
  //发送请求
  return instance(config)
}

import {insance1} from './network/request'
insance1({
  url:'/home'
}).then(res =>{
  console.log(res);
}).catch(err =>{
  console.log(err);
})

axios拦截器

请求成功和失败，响应成功和失败四个拦截