axios网络模块封装

1、认识axios网络模块认识

1、支持多种请求方式:

axios(config)

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

 2、全局发送get请求：

axios({
  url: 'http://123.207.32.32:8000/home/data',
  //专门针对get请求的参数拼接，如果是post，这里就不是params而是data
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log("-----专门针对get请求的参数拼接-----")
  console.log(res);
})

3、axios发生并发请求

axios.all([axios(
  {
    url: 'http://123.207.32.32:8000/home/multidata'
  }
), axios(
  {
    url: 'http://123.207.32.32:8000/home/data',
    //专门针对get请求的参数拼接
    params: {
      type: 'pop',
      page: 1
    }
  }
)]).then(results => {
  console.log("-----2、axios发生并发请求-----")
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})

4、spread分别取得axios发生并发请求结果

有时候, 我们可能需求同时发送两个请求

        使用axios.all, 可以放入多个请求的数组.

        axios.all([]) 返回的结果是一个数组，使用 axios.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',
    //专门针对get请求的参数拼接
    params: {
      type: 'pop',
      page: 1
    }
  }
)]).then(axios.spread((res1, res2) => {
  console.log("-----3、spread分别取得axios发生并发请求结果-----");
  console.log(res1);
  console.log(res2);
}))

2、全局配置

1、全局配置格式

在上面的示例中, 我们的BaseURL是固定的

事实上, 在开发中可能很多参数都是固定的.

这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

axios.defaults.baseURL = ‘123.207.32.32:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

//4、全局配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

axios.all([axios(
  {
    url: '/home/multidata'
  }
), axios(
  {
    url: '/home/data',
    //专门针对get请求的参数拼接，如果是post，这里就不是params而是data
    params: {
      type: 'pop',
      page: 1
    }
  }
)]).then(axios.spread((res1, res2) => {
  console.log("-----4、全局配置-----");
  console.log(res1);
  console.log(res2);
}))

2、常见的配置选项

请求地址

url: '/user',

请求类型

method: 'get',

请根路径

baseURL: 'http://www.mt.com/api',

请求前的数据处理

transformRequest:[function(data){}],

请求后的数据处理

transformResponse: [function(data){}],

自定义的请求头

headers:{'x-Requested-With':'XMLHttpRequest'},

URL查询对象

params:{ id: 12 },

        查询对象序列化函数

        paramsSerializer: function(params){ }

        request body

        data: { key: 'aa'},

        超时设置

        timeout: 1000,

        跨域是否带Token

        withCredentials: false,

        自定义请求处理

        adapter: function(resolve, reject, config){},

        身份验证信息

        auth: { uname: '', pwd: '12'},

        响应的数据格式 json / blob /document /arraybuffer / text / stream

        responseType: 'json',

 3、axios封装实例

1、方法1

export function request1(config, success, failure) {
  //1、创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  instance(config)
    .then(res => {
      //console.log(res);
      success(res);
    })
    .catch(err => {
      //console.log(err);
      failure(err);
    })
}

2、方法2

export function request2(config) {
  //1、创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  instance(config.baseConfig)
    .then(res => {
      //console.log(res);
      config.success(res);
    })
    .catch(err => {
      //console.log(err);
      config.failure(err);
    })
}

3、方法3

export function request3(config) {
  return new Promise((resolve, reject) => {
    //1、创建axios实例
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })

    instance(config)
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err);
      })
  })
}

4、方法4：最终的封装方案

（instance(config)本身返回值就是Promise）

export function request4(config) {
  //1、创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  //3、发送真正的网络请求，instance(config)本身返回值就是Promise
  return instance(config)
}

4、拦截器

如果全局拦截器就是：axios.interceptors.use()

1、请求拦截

请求拦截：instance.interceptors.request.use()

传入两个函数，一个是请求成功拦截，一个是请求失败拦截

作用：

• 比如当config中的游戏额信息不符合服务器要求的时候，可以在请求拦截器中进行修改；
• 或者每次发送网络请求希望在页面显示请求的图标；
• 或者某些网络请求比如登录，必须携带一些特殊信息token，当用户没提供的时候可以跳转到一些页面提醒用户登录
• 可能的错误比如请求超时，可以将页面跳转到一个错误页面中。

请求拦截中错误拦截较少，通常都是配置相关的拦截

//拦截完还需要原封不动的返回出去

  instance.interceptors.request.use(
    config => {
      console.log('*********request拦截器***********');
      console.log(config);
      console.log('*********request拦截器***********');
      //拦截完还需要原封不动的返回出去
      return config;
    }, err => {
      console.log('*********request拦截器***********');
      console.log(err);
      console.log('*********request拦截器***********');
    });

2、相应拦截

响应拦截：instance.interceptors.response.ues();

传入两个函数，一个是请求成功拦截，一个是请求失败拦截

作用：

• 响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。

//拦截完还需要原封不动的返回出去

//响应拦截：instance.interceptors.response;
  instance.interceptors.response.use(
    result => {
      console.log('*********response拦截器result***********');
      console.log(result);
      console.log('*********response拦截器result***********');
      //拦截完还需要原封不动的返回出去
      return result;
    },
    err => {
      console.log('*********response拦截器err***********');
      console.log(err);
      console.log('*********response拦截器err***********');
    }
  )

模

块