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;
}