[前端笔记036]vue2之ajax配置

在Vue 2项目中，可以使用axios库来配置AJAX请求。以下是如何安装和配置axios的步骤：

1. 安装axios：

npm install axios

2. 在Vue项目中配置axios：

// main.js
import Vue from 'vue'
import axios from 'axios'
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    return config
  },
  error => {
    // 请求错误处理
    return Promise.reject(error)
  }
)
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    return response.data
  },
  error => {
    // 响应错误处理
    return Promise.reject(error)
  }
)
 
// 将axios实例挂载到Vue原型上
Vue.prototype.$http = service
 
// 其余的Vue配置...

3. 在组件中使用axios发送请求：

// MyComponent.vue
export default {
  // ...
  methods: {
    fetchData() {
      this.$http.get('/some-endpoint').then(response => {
        console.log(response)
      }).catch(error => {
        console.error(error)
      })
    }
  },
  created() {
    this.fetchData()
  }
  // ...
}

这样就可以在Vue 2项目中使用axios发送AJAX请求了。