axios官网
一、解释
axios是一个基于promise的第三方数据请求库，可以用在浏览器（前端）和 node.js (后端) 中。
二、安装
下载： npm install --save axios
三、使用
①在src文件夹下新建api文件夹(封装数据请求的文件夹)util文件夹(工具文件夹)
②创建拦截器 在util下新建一个文件 (service.js) 写入如下内容
import axios from "axios"// 创建axios实例const service = axios.create({baseURL: "/api",timeout: 100000, //设置超时时间headers: {"Content-Type": "application/json;charset=UTF-8",//"Content-Type": "application/x-www-form-urlencoded;charset=utf-8", }});// 添加请求拦截器service.interceptors.request.use(function (config) {// 在发送请求之前做些什么//config.headers.Authorization = window.sessionStorage.getItem('token')//最后必须return config 这是固定写法return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器service.interceptors.response.use(function (response) {// 对响应数据做点什么 (当正确的时候做一些操作)return response;}, function (error) {// 对响应错误做点什么switch(error.response.status) {case 404:alert('超时了')break;case 500:alert('内部服务器错误')break;default:alert('别请求了')break;}return Promise.reject(error);});export default service
③请求封装在api文件夹下创建一个文件 (index.js ) 用来容纳数据请求的封装
因为上面把axios给了service 所以需要先引入service
import service from "@/util/service.js"// 开始封装数据请求// get方法export function GET(url, data) {return new Promise((resolve, reject) => {service.get(url, data).then(response => {resolve(response.data);}, err => {reject(err);}).catch((err) => {reject(err)})})}//POST方法export function POST(url, data) {return new Promise((resolve, reject) => {service.post(url, data).then(response => {if (!response.data) {resolve(response);}resolve(response.data);}, err => {reject(err);}).catch((err) => {reject(err)})})}// delete方法export function DELETE(url,id) {return new Promise((resolve, reject) => {service.delete(url+"/"+id).then(res => { if(!res.data){resolve(res);}resolve(res.data);}, err => {reject(err);}).catch((err) => {reject(err)})})}
④调用数据请求
比如我在book.js存放当前页面的所以请求
//book.jsimport {GET,POST,DELETE} from "./index";// 这个模块封装所有数据的相关操作（增删改查）// 添加export const addApi= data => POST("/books",data);// 获取列表export const getTianQiApi= ()=>GET("/?version=v9&appid=23035354&appsecret=8YvlPNrz");// 删除export const removeApi=bookid=>DELETE("/books",bookid);
⑤然后在你的组件中去用
<template><div>home.vue</div></template><script>import {getTianQiApi,getApi,removeApi} from "@/api/book.js";export default{data(){return{}},mounted(){getTianQiApi().then(data=>{console.log("data添加成功",data);}).catch(err=>{console.log("错误",err);})},methods:{}} </script>
⑥效果
四、请求时遇到跨域问题了
①为何会跨域？
就是浏览器的安全机制 不同源 （不同端口 不同协议 不同域名）就会造成跨域
②解决跨域
1.jsonp
2.代理跨域
·devServer代理跨域
(1) 需要在vue项目的根路径下创建一个vue.config.js的文件
(2) 写如下内容
module.exports={devServer:{proxy:{"/api":{// target:"你要解决跨域的地址",target:"/",changeOrigin:true,pathRewrite:{"^/api":""}}}}}
( 3 )修改我们的请求路径为/api
export default {
mounted( ) {
axios.get ( "/api/data/cityinfo/1012121.html" ).then( res => {
console.log( res)
})
}
}
( 4 ) 因为我们修改了配置文件 那么项目必须重启
· nginx反向代理
3.CORS（后端配合）
