vue之axios

axios(url[, 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]])
在使用別名方法時，url、method、data這些屬性都沒必要在配置中指定

處理併發請求的助手函數

axios.all(iterable)
axios.spread(callback)
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 兩個請求如今都執行完成
  }));

可使用自定義配置新建一個 axios 實例

axios.create([config])
var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

請求響應

{
  // `data` 由服務器提供的響應
  data: {},

  // `status` 來自服務器響應的 HTTP 狀態碼
  status: 200,

  // `statusText` 來自服務器響應的 HTTP 狀態信息
  statusText: 'OK',

  // `headers` 服務器響應的頭
  headers: {},

  // `config` 是爲請求提供的配置信息
  config: {}
}

全局的 axios 默認值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

在請求或響應被 then 或 catch 處理前攔截它們。

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
    // 在發送請求以前作些什麼
    return config;
  }, function (error) {
    // 對請求錯誤作些什麼
    return Promise.reject(error);
  });

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應數據作點什麼
    return response;
  }, function (error) {
    // 對響應錯誤作點什麼
    return Promise.reject(error);
  });

使用 cancel token 取消請求

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});

// 取消請求（message 參數是可選的）
source.cancel('Operation canceled by the user.');

應用實例一：

$req(method, url, params) {
    const promise = new Promise((resolve,reject) =>{
    const headers = {}
    const noData = (method === 'get' || method === 'delete')
    axios[method](url, (noData ? {headers, params} : params), (noData ? '' :{headers})).then(resp => {
      if (resp.status === 200) {
        if (resp.data.code === 0) {
          resp.data = resp.data || {}
          resolve(resp.data)
        }else {
          console.log(resp.data.msg)
        }
      } else {
        reject(resp)
      }
    }).catch((err) => {
      if (err == 'Error: Network Error') {
        console.log('請求超時，請稍後再試')
      } else {
        console.log('請求失敗')
      }
      reject(err)
    })
  })
  return promise
},

$get(url, params) {
  if (params) {
    let arr = []
    for (let p in params) {
      if (params[p] || params[p] === 0) {
        arr.push(`${p}=${params[p]}`)
      }
    }
    url = `${url}?${arr.join('&')}`
  }
  return this.$req('get', url)
},

$put(url, params) {
  return this.$req('put', url, params)
},

$post(url, params) {
  return this.$req('post', url, params)
},

$del(url, params) {
  if (params) {
    let arr = []
    for (let p in params) {
      if (params[p] || params[p] === 0) {
        arr.push(`${p}=${params[p]}`)
      }
    }
    url = `${url}?${arr.join('&')}`
  }
  return this.$req('delete', url)
}

應用實例二：

import axios from 'axios'
const BaseURL = 'xxxxxxxxxxxx'

export default function $http(opts) {
  let {
    url,
    method,
    headers,
    data,
    params,
    responseType='json',
    timeout=30000
  } = opts;

  let Instance = axios.create({
    baseURL: BaseURL,
    withCredentials: false
  })

  //請求返回數據攔截
  Instance.interceptors.response.use(function (response) {
    // 對響應數據作點什麼
    if (response.status == 200 && response.data) {
      if (response.data.code == 0) {
        return response.data.data;
      } else {
        return Promise.reject(response.data.msg);
      }
    } else {
      return Promise.reject(response)
    }
  }, function (error) {
    return Promise.reject(error)
  })
  let promise = Instance.request({
    url,
    method,
    headers,
    data,
    responseType,
    params,
    timeout
  })
  return promise;
}