# AXIOS

# axios 局部请求

import axios from 'axios';

axios({
  method: 'post',
  url: 'https://some-domain.com/api/..',
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

看云网址

# data

data 是作为请求主体被发送的数据只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'

浏览器专属：FormData, File, Blob

Node 专属： Stream

# params

axios({
  method: 'get',
  url: 'https://some-domain.com/api/..',
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  params: {
    ID: 12345
  }
});

params 是即将与请求一起发送的 URL 参数

必须是一个无格式对象(plain object)或 URLSearchParams 对象

# axios

//导入axios
import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000 // 请求超时时间
})

// 添加请求拦截器
service.interceptors.request.use(config => {

    //在发送请求之前做些什么
  return config
  
}, error => {

   //对请求错误做些什么
  Promise.reject(error)
  
})


//添加响应拦截
service.interceptors.response.use(response => {

      //对响应数据做些什么
      return response.data
      
  },
  error => {
  
      //对响应错误做些什么 
     return Promise.reject(error)
     
  }
)

//暴露出去
export default service

# axios封装

import axios from 'axios'

const service = axios.create({
    baseURL: process.env.API_BASE_URL,
    timeout: 6000
})

//错误封装
const error = err => {
    if (err.response) {
        const { data, status } = err.response;
        if (status === 401) {
            vueIns.$notify.error({title: '访问被拒绝', message: '客户试图未经授权访问受密码保护的页面'});
        }else if (status === 403) {
            vueIns.$notify.error({title: '资源不可用', message: '服务器理解客户的请求，但拒绝处理它'});
        }else if (status === 404) {
            vueIns.$notify.error({title: '找不到页面',message: '无法找到指定位置的资源'});
        }else if (status === 500) {
            vueIns.$notify.error({title: '服务内部错误', message: '服务器遇到了意料不到的情况，不能完成客户的请求'});
        }
    }
    return Promise.reject( err );
}

//拦截请求
service.interceptors.request.use(config => {
    console.log('拦截请求');
    const token = Vue.ls.get( ACCESS_TOKEN );
    if (token) {
        config.headers['token'] = token;
    }
    return config
}, error)

//拦截响应
service.interceptors.response.use( response => {
    console.log('拦截响应');
    return response.data;
}, error)

export default service;

← AJAX Promise →