请求
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>') })