axios模塊封裝

1.新建文件夾 network 在文件新建 request.js

request.js：

import axios from 'axios'

export function request (config) {
  // 1創建axios實例
  const intstance = axios.create({
    baseURL: 'https://localhost:44314',
    timeout: 5000
    // contentType: 'application/json;charset=UTF-8',
    // dataType: 'json'
  })

  // 1.axios攔截器
  intstance.interceptors.request.use(config => {
    return config
  }, er => {})

  // 1.axios響應攔截攔截
  intstance.interceptors.response.use(res => {
    return res
  }, er => {
  })

  return intstance(config)

}

export default request //導出

2.main.掛載配置

import request from '@/network/request'

new Vue({
  el: '#app',
  router,
  store,
  request, // 封裝的axios
  components: { App },
  template: '<App/>'

})

3.在需要使用axios的vue組件調用

import request from '@/network/request'

  request({ // 查詢所有
        url: '/api/Gj'
      }).then(res => {
        this.tableData = res.data
      })

 request({ // 條件查詢
        url: '/api/Gjtype/' + gjtype
      }).then(res => {
        this.tableData = res.data
      })


 request({ // 添加
        url: '/api/Gj',
        method: 'POST',
        data: {
          'id': 0,
          'method': this.method,
          'text': this.content,
          'type': this.value
        }
      }).then(res => {
        console.log(res)
        if (res.status === 201) {
          this.open1()
          console.log('成功')
        } else {
          this.open4()
          console.log('失敗')
        }
      }).catch(console.error.bind(console)) // 異常


request({// 更新
        url: '/api/Gj/' + this.id,
        method: 'put',
        data: {
          'id': this.newinfo.id,
          'method': this.newinfo.method,
          'text': this.newinfo.text,
          'type': this.newinfo.type
       }
      }).then(res => {
        if (res.status === 204) {
          this.open1()
          console.log('成功')
        } else {
          this.open4()
          console.log('失敗')
        }
      }).catch(console.error.bind(console)) // 異常