axios基础知识

axios常用基础用法

    const url = "****" //接口地址
    const params = {} //参数
    axios.get(url, {params}).then(function (res) {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })
    axios.post('url', params).then(function (res) {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })

axios 全局配置
配置公共请求的根路径
axios.defaults.baseURL = ‘https://*******’;
配置 超时时间
axios.defaults.timeout = 2500;
配置公共的请求头
axios.defaults.headers.common[‘Authorization’] = token;
配置公共的 post 的 Content-Type
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
配置公共的headers :是即将被发送的自定义请求头
axios.defaults.headers.common[‘X-Requested-With’] = ‘XMLHttpRequest’

axios 拦截器
请求拦截器

请求拦截器的作用是在请求发送前进行一些操作 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

响应拦截器

响应拦截器的作用是在接收到响应后进行一些操作 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

  // 1. 在request请求拦截器
  axios.interceptors.request.use((config) => {
    //  任何请求都会经过这一步 在发送请求之前做些什么
    config.headers.Authorization = 'token'
    return config //这里一定要return 否则配置不成功
  })
  // 2. 在response响应拦截器
  axios.interceptors.response.use((config) => {
    //在接收响应做些什么  
    return config//这里一定要return 否则配置不成功
  })

axios文档网站

封装axios

    const api = {
      get: (url, params) => {
        url = url || ''
        params = params || {}
        return new Promise((resolve, reject) => {
          axios.get(url, {
            params: params
          }).then(function (response) {
            resolve(response)
          }).catch(function (error) {
            reject(error)
          })
        })
      },
      post: (url, params) => {
        url = url || ''
        params = params || {}
        return new Promise((resolve, reject) => {
          axios.post(url, params).then(function (response) {
            resolve(response)
          }).catch(function (error) {
            reject(error)
          })
        })
      }
    }