【前端Vue】axios

1. axios的功能和特点

  1. 在浏览器中发送 XMLHttpRequests 请求;

  2. node.js 中发送 http请求;

  3. 支持 Promise API

  4. 拦截请求和响应;

  5. 拦截请求和响应。

1.1 axios支持多种请求方式

  1. axios(config);

  2. axios.request(config);

  3. axios.get(url[, config]);

  4. axios.delete(url[, config]);

  5. axios.head(url[, config]);

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

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

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

2. axios的基本使用

2.1 安装 axios

  1. 使用 npm install axios --save 安装axios

2.2 在main.js中导入

import axios from 'axios'

2.3 使用 axios 发送简单请求

  1. axios发送请求默认返回的是一个 Promise对象。使用 Promise对象调用 then方法处理返回结果。

  2. axios默认发送的是一个 GET请求。

/**
 * 发送请求,
 * 会不会出现跨域?
 * 默认发送的是get请求
 */
axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  methods: 'get'
}).then(value => {
  console.log(value)
})

axios.get('http://123.207.32.32:8000/home/multidata').then(
  value => {
    console.log(value)
  }
)
发送请求的时候传递参数
axios({
    url:'http://123.207.32.32:8000/home/multidata',
    params:{
        type:'pop',
        page:1
    }
})

2.4 全局配置

  1. 事实上, 在开发中可能很多参数都是固定的,这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置。
axios.defaults.baseURL = ‘xxx.xxx.xxx.xxx:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’
axios.defaults.timeout = 5000

2.5 axios常见的配置选项

  1. 请求地址 url: '/user';

  2. 请求类型 method: 'get';

  3. 请根路径baseURL: 'http://www.mt.com/api';

  4. 请求前的数据处理transformRequest:[function(data){}];

  5. 请求后的数据处理transformResponse: [function(data){}];

  6. 自定义的请求头headers:{'x-Requested-With':'XMLHttpRequest'};

  7. URL查询对象params:{ id: 12 };

  8. 查询对象序列化函数paramsSerializer: function(params){ };

  9. 请求体 request body data: { key: 'aa'};

  10. 超时设置ms timeout: 1000;

  11. 跨域是否带 Token withCredentials: false;

  12. 自定义请求处理 adapter: function(resolve, reject, config){};

  13. 身份验证信息 auth: { uname: '', pwd: '12'};

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

  15. 响类型 responseType: 'json';

2.6 axios发送 并发请求

  1. 有时我们可能需要同时发送 多个请求,可以使用axios.all(),可以放入多个请求的数组,axios.all([])返回结果是一个数组,使用 axios.spread可将数组[val1,val2]进行解构。
axios.all([
  axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  })
  ,
  axios({
    url: 'http://123.207.32.32:8000/home/multidata',
    params: {
      type: 'pop',
      page: 4
    }
  })
  /!* 对返回的结果数组进行展开 *!/
]).then(value => {
  console.log(value[0]);
  console.log(value[1]);
})

2.7 axios发送get请求传递参数的几种方式

axios发送get请求传递参数的几种方式

3. axios的实例和模块的封装

  1. src下创建一个 network/request.js,在该文件中封装axios模块:
import axios from 'axios'

export default function (config) {
  // 创建一个新的axios实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })
  // 返回请求对象 返回一个 Promise 对象
  return instance(config)
}

4. axios 拦截器的使用

4.1 请求拦截可以做的几件事

  1. 当发送网络请求时,页面中希望添加一个 loading的组件,作为动画;

  2. 某些请求要求用户必须登录,判断用户是否有token如果没有token则跳转到login页面。

  3. 对请求参数进行序列化。

  4. 当出现请求错误时,可以将页面跳转到一个错误页面中。

/**
   * 请求拦截器
   */
  instance.interceptors.request.use(
    config => {
      // 请求成功时
      console.log(config)
      /**
       *  可能在这里进行的处理
       *    1. 需要检查config的配置
       *    2. 在请求过程中的动画
       *    3. 某些网络请求是必须携带一些特殊的信息 如 token
       */
      console.log(config.headers)

      return config // 需要将config作为返回值返回
    },
    err => {
      // 请求失败的时候
      console.log(err)
    }
  )

4.2 响应拦截器主要可以做什么?

  1. 响应的成功拦截中,主要进行数据的过滤。

  2. 响应的失败拦截中,可以根据 status 判断报错的错误码,跳转到不同的错误页面。

/**
   * 响应拦截器
   *  对响应结果进行的处理
   */
  instance.interceptors.response.use(
    result => {
      // 这里会将结果进行拦截
      return result.data
      // console.log(result)
    },
    err => {

    }
  )

5. 一个简单request.js请求模块的封装

import axios from 'axios'

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

  /**
   * 请求拦截器
   */
  instance.interceptors.request.use(
    config => {
      // 请求成功时
      console.log(config)
      /**
       *  可能在这里进行的处理
       *    1. 需要检查config的配置
       *    2. 在请求过程中的动画
       *    3. 某些网络请求是必须携带一些特殊的信息 如 token
       */
      console.log(config.headers)

      return config // 需要将config作为返回值返回
    },
    err => {
      // 请求失败的时候
      console.log(err)
    }
  )

  /**
   * 响应拦截器
   *  对响应结果进行的处理
   */
  instance.interceptors.response.use(
    result => {
      // 这里会将结果进行拦截
      return result.data
      // console.log(result)
    },
    err => {

    }
  )

  // 返回请求对象 返回一个 Promise 对象
  return instance(config)
}

推荐阅读更多精彩内容