Vue-Axios基本使用-并发请求-全局配置-Axios实例-模块封装

Axios基本使用

导入axios
cnpm npm install axios --save

import axios form 'axios'
axios({
	url: 'http://123.207.32.32:8000/home/multidata'method: 'get' //默认是get方式
	// axios自动调用promise,并进入resolve函数继续调用
}).then(res=>{
	console.log(res)
})
-------------------------------------------------------------------------------
axios({
  url: 'http://123.207.32.32:8000/home/data?type=sell&page=3'
}).then(res=>{
  console.log(res);
})

get请求参数拼接,可以这样写
http://123.207.32.32:8000/home/data?type=pop&page=1

axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res=>{
  console.log(res);
})

Axios发送并发请求

axios.all([
  axios({
    url: 'http://123.207.32.32:8000/home/multidata?',
    params: {
      callback: 'json123'
    }
  }),
  axios({
    url: 'http://123.207.32.32:8000/home/data'
  })
]).then(res=>{
  console.log(res[0]);
  console.log(res[1]);
})

也可以分开来

axios.all([
  axios({
    url: 'http://123.207.32.32:8000/home/multidata?',
    params: {
      callback: 'json123'
    }
  }),
  axios({
    url: 'http://123.207.32.32:8000/home/data'
  })
]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2);
}))

Axios全局配置

  • 我们的BaseURL是固定的
  • 事实上,在开发中可能很多参数都是固定的
  • 这个时候我们可以进行一些抽取,也可以利用axios的全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
Vue-Axios基本使用-并发请求-全局配置-Axios实例-模块封装_第1张图片

Axios实例

//创建对应的Axios实例, 不适用全局的Axios
const axios01 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000,
})
axios01({
  url: '/home/multidata',
  params:{ }
}).then(res=>{
  console.log(res);
})

请求另外一个服务器

const axios02 = axios.create({
  baseURL: 'http://116.62.156.97:9003',
  timeout: 5000
})
axios02({
  url: '/index',
  methods: 'get'
}).then(res=>{
  console.log(res);
})

Axios模块封装

Vue-Axios基本使用-并发请求-全局配置-Axios实例-模块封装_第2张图片
request函数参数也可以封装成一个参数

import axios from 'axios'
//config参数是一个对象,有url,params属性
//success参数是一个函数
export function request(config){
  //1.创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  //发生真正的网络请求
  instance(config.baseConfig).then(res=>{
    config.success(res)
  }).catch(err=>{
    config.failure(res)
  })
}
import {request} from "./network/request";
request({
  baseConfig: {
    url: '/home/multidata'
  },
  success(res){
    console.log(res);
  },
  failure(err){
    console.log(err);
  }
})

还可以更优雅Promise嵌套
使用Promise包裹代码,调用promise的resolve方法和reject方法,调动者就不必传入success函数和failure函数了


export function request(config) {
  return new Promise((resolve,reject)=>{
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    instance(config).then(res=>{
      resolve(res)
    }).catch(err=>{
      reject(res)
    })
  })
}
import {request} from "./network/request";
request({
  url: '/home/multidata'
}).then(res=>{
  //success
  console.log(res);
}).catch(err=>{
  console.log(err);
})

终极方案
instance本身就是Promise,再嵌套一次,没有必要啊!

export function request(config) {
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    return instance(config)
}
import {request} from "./network/request";
request({
  url: '/home/multidata'
}).then(res=>{
  //success
  console.log('kcl');
  console.log(res);
}).catch(err=>{
  console.log(err);
})

你可能感兴趣的:(#,vue,vue)