关于前端:axios基础封装

request.js

新建文件夹 network 在文件新建 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 //导出

main.挂载配置

import request from '@/network/request'new Vue({  el: '#app',  router,  store,  request, // 封装的axios  components: { App },  template: '<App/>'})

vue组件调用

在须要应用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)) // 异样