网络模块封装

选择什么网络模块

  1. 传统的Ajax
    缺点:配置和调用方式等非常混乱
  2. jQuery-Ajax
    缺点:在Vue整个开发中都是不需要使用jQuery的
  3. axios

axios

功能特点:

  1. 在浏览器中发送XMLHttpRequests请求
  2. 在Node.js中发送http请求
  3. 支持Promise API
  4. 拦截响应和请求
  5. 转换请求和响应数据

axios的基本使用

安装axios框架:
npm install axios --save 在入口文件main.js中引入axios并调用
注意:axios返回一个Promise对象,所以可以直接链式调用获取数据

import axios from 'axios'
axios({
  // 请求方式默认为get,如果需要改变请求方式的话,则需要使用如下方法
  methods:'get'
  url:'http://123.207.32.32:8000/home/multidata',
  // 专门针对get请求的参数拼接
  prarms:{
    type:'',
    page:1
  }
}).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);
})

全局配置

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

//将公共配置单独抽取出来
axios.defaults.baseURL = '123.207.32.32:8080'
axios.defaults.hedaers.post['Content-Type'] = 'application/www-form-urlencoded';
// 使用全局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);
})

axios请求错误后怎么获取状态码 axios发送请求_ios


axios请求错误后怎么获取状态码 axios发送请求_ios_02

axios的实例

创建axios实例原因:

  1. 当我们从axios模块中导入对象时,使用的实例是默认的实例
  2. 当给该实例设置一些默认配置时,这些配置就被固定下来了
  3. 但是后续开发中,其中某些配置可能会不一样
  4. 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等
  5. 这个时候,我们就可以创建新的实例,并且传入属于该实例的配置信息
const instance = axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout:3000
})
instance({
   url:'/home/multidata'
}).then(res =>{
  console.log(res);
})
instance({
  url:'/home/data',
    params:{
    type:'sell',
    page:3
  }
}).then(res =>{
  console.log(res);
})

axios的模块封装

在组件中引用axios模块并发送网络请求,但假如axios框架某天出现bug并不在维护时,那就需要更改大量的代码很是麻烦。所以为了防止这种问题的发生,我们最好对axios框架进行封装

  1. 在 src下创建一个network文件夹,并在其中创建一个request.js文件,在其中封装一个request函数,并将其导出.

将其中数据回调出去的三种方法:
3. 在request函数中分别设置三个请求参数(config,success,failure)

import axios from 'axios'
export function request(config,success,failure){
   //创建axios实例
    const instance = axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout:3000
      })
      instance(config)
      .then(
         res =>{
         console.log(res);
          success(res)
         }
      )
      .catch(err=>{
       console.log(err);
         failure(err)
      }
      )
   })
  1. 返回一个Promise对象(推荐使用)
import axios from 'axios'
export function request(config){
   return new Promise((resolve,reject)=>{
    const instance = axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout:3000
      })
      instance(config)
      .then(
         res =>{
            resolve(res)
         }
      )
      .catch(err=>{
        reject(err)
      }
      )
   })
  1. return instance()(终极方案)
import axios from 'axios'
export function request(config){
    const instance = axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout:3000
      })
      return instance(config)
}

在入口文件main.js调用时，则需要使用

request().then(res =>{
console.log(res)})
.catch(err =>{
console.log(err)})

axios拦截器

axios提供了拦截器,用于我们在发送每次请求或者得到响应后,进行对应的处理(感觉类似于app.use中间件)
拦截器的作用:

  1. 比如config中的一些信息不符合服务器的要求,需要将其拦截
  2. 比如每次发送网络请求时,都希望在界面中显示一个请求的图标
  3. 某些网络请求请求(比如登录(token)),必须携带一些特殊的信息
// 表示拦截请求
instance.interceptors.request
// 传入两个参数,参数为函数
  instance.interceptors.request.use( config =>{
      console.log(config);
      // 如果拦截时,就需要返回config,否则控制端会报错
      return config},
      err =>{
         console.log(err);
      })
// 拦截响应
 instance.interceptors.response
// 传入两个参数,参数为函数
  instance.interceptors.response.use( res =>{
      console.log(res);
      // 如果拦截时,就需要返回config,否则控制端会报错
      return res},
      err =>{
         console.log(err);
      })

axios请求封装

import axios from 'axios'
export function request(config){
    const instance = axios.create({
        baseURL:'http://152.136.185.210:7878/api/m5',
        timeout:5000
    })
    instance.interceptors.request.use(config =>{
         console.log(config);
         return config
    },err=>{
     console.log(err);
    })

    instance.interceptors.response.use(res =>{
        console.log(res);
        return res.data
    },err=>{
      console.log(err);
    })
    return instance(config)
}