九、网络封装（axios）

安装依赖

npm install axios --save

注意：文件名不要和axios一样，可以去package.json里面修改name

请求方式axios(config)

main.js中导入import axios from "axios";

axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  method: 'get'
}).then(res => {
  console.log(res)
})

axios发送并发请求

//返回的结果是数组
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
  	type: 'sell',
  	page: 3
  }
})]).then(res => {
  console.log(res)
})

//spread将数组[res1,res2]展开为res1,res2
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'sell',
    page: 3
  }
})]).then(axios.spread((res1,res2) => {
  console.log(res1)
  console.log(res2)
}))

全局配置（抽取公共的）

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

axios.all([axios({
  url: '/home/multidata'
}),axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 3
  }
})]).then(axios.spread((res1,res2) => {
  console.log(res1)
  console.log(res2)
}))

创建对应的axios实例（多个ip地址）

const instance1 = axios.create({
  baseURL : 'http://123.207.32.32:8000',
  timeout : 5000
})

instance1({
  url: '/home/multidata'
}).then(res => {
  console.log(res)
})

instance1({
  url: '/home/data',
  params: {
    type: 'pop',
    page: 3
  }
}).then(res => {
  console.log(res)
})

const instance2 = axios.create({
  baseURL : 'http://321.207.32.32:8000',
  timeout : 10000
})

instance2({
  url: '/home/multidata'
}).then(res => {
})

封装

方法1：回调函数

/***requst.js封装***/
import axios from "axios";
export function requst(config, success, failure) {
  //1.创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  //2.发送真正的网络请求
  instance(config).then( res => {
    success(res)
  }).catch( err => {
    failure(err)
  })
}

/***main.js使用***/
import { requst } from "./network/requst";
requst({
  url: '/home/multidata'
}, res => {
  console.log(res)
}, err => {
  console.log(err)
})

方法2：promise（推荐）

/***requst.js封装***/
import axios from "axios";
export function requst(config) {
  return new Promise( (resolve, reject) => {
    //1.创建axios实例
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    //2.发送真正的网络请求
    instance(config).then( res => {
      resolve(res)
    }).catch( err => {
      reject(err)
    })
  })
}

/***main.js使用***/
import { requst } from "./network/requst";
requst({
  url: '/home/multidata'
}).then( res => {
  console.log(res)
}).catch( err =>{
  console.log(err)
})

方法3：promise（最终）

/***requst.js封装***/
import axios from "axios";
export function requst(config) {
   //1.创建axios实例
   const instance = axios.create({
     baseURL: 'http://123.207.32.32:8000',
     timeout: 5000
   })
   //2.发送真正的网络请求
   return instance(config) //instance返回值就是promise
}

/***main.js使用***/
import { requst } from "./network/requst";
requst({
  url: '/home/multidata'
}).then( res => {
  console.log(res)
}).catch( err =>{
  console.log(err)
})

拦截器

import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    return config //不返回就会被拦截，接收不到数据
  }, err => {
    
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}

获取轮播图数据实例：

/***home.js首页的请求文件***/
import {request} from "network/request";
export function getHomeMultidata(){
  return request({
    url: '/home/multidata'
  })
}

/***Home.vue使用***/
data() {
    return {
      banners: [], //保存数据
      recommends: [] //保存数据
    }
},
created() { //只写发送请求，具体的方法写在methods里面
    this.getHomeMultidata()
},
methods: {
	getHomeMultidata() {
      getHomeMultidata().then( res => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      })
    }
}