axios 使用笔记

axios 是vue全家桶之中的 一桶

  npm install axios -D

**使用实例**

import axios from 'axios'

// 可以直接传入给axios一个对象来发起请求
let token = sessionStorage.getItem('token') || ''

// axios可以通过create 绑定一些默认选项
var server = axios.create({
  // 配置请求的域名
  baseURL: 'http://www.abaijun.cn/',
  timeout: 3000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8;',
    token,
  }
})

// 也可以通过 全局配置axios 的属性
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 设置所有的请求的 Authorization
axios.defaults.headers.post['Content-Type'] = 'application/json' // 设置post 的 content-typ
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded' // 设置get 的content-Type

axios({
  method: 'post',
  url: '/login',
  headers: {},
  params: { a: 1, b: 2}, //  param 会被添加到url后面，get 请求的参数
  data: {
    name: 'abai',
    pass: '123456'
  },
  responseType: 'JSON', // 如果希望返回的类型不是json 则，需要设置此
                        // arraybuffer、blob、document、text 或 stream
  auth: {username: 'abc', 'password': '123456'}, // 传递一个含有 username 和 password 的对象，在请求时使用这些凭据用于服务器端的基础验证。
})

// axios 提供了get delete head options方法，这些都接受两个参数 url和【可选】的{options}

axios.get('/login', {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;',
  },
  param: {a: 1, b: 2}
}).then(res => {
  console.log(res)
}).catch(err => {}) 

// axios 还提供了post put patch 方法的{options}

axios.post('./login', {
  name: 'abai',
  pass: '123456',
}, 
{
  headers: {
    'Content-Type': 'application/json;charset=utf-8;'
  }
}).then(res => {
  console.log(res)
}).catch(err => {})

/**
 * 返回的res对象： 
    data ：从服务器返回的数据。默认情况下，Axios 期望得到的是 JSON 数据，并将它解析回JavaScript对象。
    status ：服务器返回的 HTTP 状态码。
    statusText ： 服务器返回的 HTTP 状态信息文本。
    headers ：服务器返回的所有标头
    config ：原始的请求配置
    request ：实际的 XMLHTTPRequest 对象（在浏览器中运行时）
 */

  // transform 改造 和 interceptor 拦截

      // transform 通过设置函数对【发起请求前】和【接受到请求后】的数据进行处理;函数最后必须返回对象
  const options = {
    transformRequest:[ // 接收数组；会依次执行以下函数之后再请求
      (data, headers) => {
        console.log(data, headers)
        return data
      }
    ],
    transformResponse: [
      (data) => {
        console.log(data, headers)
        return data
      }
    ]
  }
  axios.get('./login', options)

    // interceptor  跟transform 的区别主要是 interceptor 能接收到请求的所有options。而transform只接受header 和请求参数
    // 最后也要记得返回修改后的对象

  axios.interceptors.request.use((config) => {
    // config 是所有用户配置的所有选项，比如config.url， 就是请求的路径
    console.log(config)
    return config
  }, (error) => {
    return Promise.reject(error)
  })

  axios.interceptors.response.use((res) => {
    // res.data  是服务器处理的返回数据
    // res.config 是所有用户配置的所有选项，比如config.url， 就是请求的路径
    console.log(res)
    return res
  }, (error) => {
    return Promise.reject(error)
  })
 // 上传文件的方法
server.post(url, {
    headers: {
      token,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    param: data,
    loading: true, // 上传文件的时候默认是显示加载框，禁止操作
    onUploadProgress(upres) {
      /**返回数据结构
       * upres : {
       *  loaded: number,
       *  total: number
       * }
       */
      // 进度管理,可以在这里计算上传的进度
      if (callback) {
        callback(upres)
      }
    },
    onDownloadProgress (progress) {
      //  下载的进度管理，参数同上传的进度
     console.log(Math.round(progress.loaded / progress.total * 100) + '%');
    }
    
  })