前端请求接口（ajax,axios）

js使用原生ajax

get请求

var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.send()
xhr.onreadystatechange = () => {
    if(xhr.readState == 4){
        if(xhr.readState == 200){
            console.log(xhr.responseText)
        }
    }
}

post请求

var xhr = new XMLHttpRequest()
xhr.open('post', url, true)
xhr.setRequestHeader('content-type','xxx')
xhr.send(data)
xhr.onreadstatechange = () => {
    if(readState == 4){
        if(readState == 200){
            console.log(xhr.responseText)
        }
    }
}

vue使用axios请求

由于vue本身不支持发送Ajax请求，所以需要axios等插件来实现

使用vue-cli脚手架

1. 安装

   npm install axios -S
   

2. 使用

• 未封装request

  • 在main.js引入axios

  import axios from 'axios'
  

  • 在Vue的原型上挂载axios方法，全局使用

  Vue.prototype.axios = axios
  

  • 组件使用

  get方法
  this.axios.get(url).then(() => {}).catch((err) => {})
  
  post方法
  this.axios.post(url,data,{
      headers:{
          'content-type':'application/json'
      }
  }).then(() => {}).catch((err) => {})
  

• 封装request请求

  • request.js

  // 引入axios
  import axios from 'axios'
  
  // 创建一个axios实例
  const service = axios.create({
      baseUrl: 'http://',
      withCredentials: true, //跨域发送cookie
      timeout: 5000
  })
  
  // 请求拦截器
  serive.interceptors.request.use(
      config => {
          if(store.getters.token){
              config.headers['X-Token'] = getToken()
              //config.headers['Authorization'] = 'Bearer ' + getToken()
          }
          return config
      },
      error => {
          console.log(error)
          return Promise.reject(error)
      }
  )
  
  // 响应拦截器
  serive.response.interceptors.use(
      response => {
          const res = response.data
          if(res == 200){
              return res
          }
      },
      error => {
          console.log(error)
          return Promise.reject(error)
      }
  )
  

  • 封装api，在api文件夹中引入request

  import request from '@/untils/request'
  
  export function getData(query){
      return request(
          url: '/data/..',
          methods:' get',
          params: query
      })
  }
  
  export function updateData(data){
      return request({
          url:'',
          methods:'post',
          data
      })
  }
  

  • 在组件中使用

  1、引入api 
  import getData from '@/api/'
  import updateData from '@/api/..'
  methods:{
      getData(){
          getData('123').then(() => {
          })
      },
      updateData(){
          updateData('ad').then(() => {
          })
      }
  }