axios

请求

get 获取数据

post 增加数据

delete 删除数据

patch 更新部分数据

put 更新所有数据

axios({method:'请求方式'，url:'地址'})

axios.请求方式('url地址',{参数})

基地址 axios.defaults.baseURL

serialize(form表单，{hash:true,empty:true})

项目

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://interview-api-t.itheima.net',
  timeout: 5000 // 超出时间
})

export default request

拦截器

// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)
// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    // console.dir(error)
    // 如果服务器有返回的结果，那么 error.response.xxx 才存在
    if (error.response && error.response.status === 401) {
      localStorage.removeItem('token')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

原生

查询

 const str = new URLSearchParams({
        pname,
        cname
      }).toString()
      const xhr = new XMLHttpRequest()
      xhr.open('GET', `http://hmajax.itheima.net/api/area?${str}`)
      xhr.addEventListener('loadend', () => {
        document.querySelector('.list-group').innerHTML = JSON.parse(xhr.response).list.map(item => {
          return `<li class="list-group-item">${item}</li>`
        }).join('')
      })
      xhr.send()

请求

 const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://hmajax.itheima.net/api/register')
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response)

      })
      xhr.setRequestHeader('Content-Type', 'application/json')
      const obj = {
        username: 'asasaqwqwq',
        password: '123123'
      }
      const data = JSON.stringify(obj)
      xhr.send(data)

封装

   function myAxios(option) {
      let { url, method, params, data } = option
      url = params ? url + '?' + new URLSearchParams(params) : url
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open(method, url)
        xhr.addEventListener('loadend', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }

        })
        if (data) {
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(JSON.stringify(data))
        } else {
          xhr.send()
        }
      })
    }
    myAxios({
      url: 'http://hmajax.itheima.net/api/area',
      method: 'GET',
      params: {
        pname: '河南省',
        cname: '安阳市'
      }
    }).then(res => {
      document.querySelector('.my-p').innerHTML = res.list.map(item => item).join('<br>')
    })

参数格式