02 axios

首先插一笔：为什么前端永axios通常都会跨域

 

axios严格遵守浏览器同源策略。说到同源策略，不得不提到另外一个概念——源（Origin）。那什么是源的呢？源其实是是个域名（domain），一般请求网页的那个url的域名就会被制定为源——如此看来同源策略就能很容易理解了，就是限制Javascript的Ajax请求与源不相同的url。

 

 

 

request.js

import axios from 'axios'
const config = require('@/config')

const instance = axios.create({
  baseURL: config.baseUrl,
  timeout: 15 * 1000 // 15s timeout
})

instance.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    return config
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    const data = response.data
    if (data.resCode !== 0) {
      return Promise.reject(data) // 人为走catch代码
    }
    return response.data
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export function get(url, params) {
  return instance.get(url, {
    params: params
  })
}
export function post(url, params) {
  instance.defaults.headers.post['Content-Type'] = 'application/json'
  return instance.post(url, JSON.stringify(params))
}

 

news.js

import { get, post } from './request'

function getNewsList(params) {
  return get('/newsList', params)
}
function updateList(params) {
  return post('/updateNewsList', params)
}
export default {
  getNewsList,
  updateList
}

 

user.js

import { post } from './request'

function getSms(params) {
  return post('/getSms/', params)
}
function register(params) {
  return post('/register/', params)
}

function login(params) {
  return post('/login/', params)
}
export default {
  getSms,
  register,
  login
}

 

index.js

// 实现自动化导入import。
const context = require.context('./', false, /\.js$/)
console.log(context.keys()) // ["./index.js", "./news.js", "./request.js", "./user.js"]
let res = {}
context.keys().forEach(filePath => {
  if (['./index.js', './request.js'].includes(filePath)) return
  const value = context(filePath).default
  res = { ...res, ...value }
})

export default res

 

main.js

import api from './network'
Vue.prototype.$api = api