__203 vue 中发起网络请求

1.vue-resource

基于 vue 开发的网络请求，2.0 之后不更新了，不推荐使用

‍

2.axios

www.npmjs.com/package/axi…

任何框架都可以使用，不需要依赖任何框架

- 常用语法 -get

__ 字符串写法

axios
  .get('/user?ID=12345')
  .then(function (res) {
    console.log(res)
  })
  .catch(function (err) {
    console.log(err)
  })
  .then(function () {
    // always executed
  })

__ 对象写法

axios
  .get('/user', {
     params: {
      ID: 12345,
    }
  })
  .then(function (res) {
    console.log(res)
  })
  .catch(function (err) {
    console.log(err)
  })
  .then(function () {
    // always executed
  })

__ es7 写法

async function getUser() {
  try {
    const res = await axios.get('/user?ID=12345')
    console.log(res)
  } catch (err) {
    console.log(err)
  }
}

‍

- 常用语法 -post

axios
  .post('/user', {
    firstName: 'D',
    lastName: 'luff',
  })
  .then(function (res) {
    console.log(res)
  })
  .catch(function (err) {
    console.log(err)
  })

__ api 写法

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'D',
    lastName: 'luff'
  }
})

- 配置根路径

方式1

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

方式2

const instance = axios.create({
  baseURL: 'https://api.example.com'
})