Axios是一个基于promise的HTTP库，可以在浏览器和node.js中使用。###Axios功能1.从浏览器创建XMLHttpRequests2。从node.js3创建http请求。支持PromiseAPI4。拦截请求和响应5。转换请求数据和响应数据6。取消请求7。自动转换JSON数据8。客户端支持XSRF安装防御npminstallaxios-Sglobalreferenceimportaxiosfrom'axios'Vue.prototype.$axios=axios//使用this.$axios.get("http://xx").then(res=>{console.log(res)}).catch(error=>{console.log(error)})localreferenceimport$axiosfrom'axios'//组件挂载生命周期函数使用$axios.get("http://xx").then(res=>{console.log(res)})//第二种写法：$axios.get("http://iwenwiki.com/api/music/list.php",{params:{type:1,count:10,offset:0}}).then(res=>{console.log(res)})也可以传给axios配置这个方法创建请求$axios({method:'post',url:"http://iwenwiki.com/api/blueberrypai/login.php",data:qs.stringify({user_id:"iwen@qq.com",密码:"iwen123",验证码:"crfvw"})}).then(...)请求配置选项这些是创建请求时可用的配置选项。只有网址是必需的。如果没有指定方法，请求将默认为get方法。{url//url是用于请求方法的服务器URL//method`是创建请求时使用的方法baseURL//将自动添加到`url`之前，除非url是绝对URLtransformRequest:[function(data,headers){//允许在发送给服务器返回数据之前修改请求数据；//对数据进行任意转换处理}],transformResponse:[function(data){//允许修改响应数据再传给then/catch返回数据;//对数据进行任意转换处理}],headers//是要发送的自定义请求头params:{//是要随请求发送的URL参数ID:12345},data:{firstName:'Fred'},timeout:1000,responseType:'json',//查看文档http://www.axios-js.com/zh-cn/docs/#axios-APIandmanymore}响应结构request包含以下信息：data{},status,statusText,headers,config,request为方便起见，给所有的请求方法都起了别名。使用别名方法时，url、method、data等属性不需要在配置中指定。axios.request(config)axios.get(url[,config])axios.delete(url[,config])axios.head(url[,config])axios.options(url[,config])axios.post(url[,data[,config]])axios.put(url[,data[,config]])axios.patch(url[,data[,config]])请求方法Get/PostGet请求：$axios.get("http://xx").then()Post请求：需要使用querystring将传入参数的对象形式转换为字符串，因为axios接受的参数是字符串类型importqsfrom'query-string'$axios.post("http://xx",qs.stringify({user_id:"iwen@qq.com",password:"iwen123",verification_code:"crfvw"})).then()用于执行多个并发请求处理并发请求的辅助函数：axios.all(iterable)和axios.spread(callback)functionAA(){return$axios.get("http://xx")//这里不要加.then()}函数BB(){返回$axios.get2/post("http://xxx");}$axios.all([AA(),BB()]).then($axios.spread((AA,BB)=>{console.log(AA,BB)}))自定义创建实例constinstance=axios.create({baseURL:"http://xxx",timeout:1000,headers:{'X-Custom-Header':'foobar'}})配置默认值【重点】全局axios默认值axios.defaults.baseURL='https://api.example.com';axios.defaults.headers.common['Authorization']=AUTH_TOKEN;axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';拦截器在请求或响应被then处理或捕获之前拦截它们添加请求拦截器axios.interceptors.request.use(function(config){//在发送请求之前做一些事情//configureif(config.method==='post'){config.data=qs.stringify(config.data);}returnconfig;},function(error){//处理请求错误returnPromise.reject(error);});添加响应拦截器axios.interceptors.response.use(function(response){//对响应数据做一些事情returnresponse.status===200?Promise.resolve(response):Promise.reject(response),},function(error){//处理响应错误returnPromise.reject(error);});如果你想稍后移除拦截器，你可以这样做：constmyInterceptor=axios.interceptors.request.use(function(){/*...*/});axios.拦截器。request.eject(myInterceptor);跨域处理开发环境跨域解决方法：Proxy代理（只在开发环境下有效。使用场景：1.后台开发人员没有时间处理跨域问题2.自己模拟数据服务器，比如mock生成跨域）第一步：在项目根目录，然后配置文件，每次修改文件，都要重启项目module.exports={devServer:{proxy:{"api":{target:"http://iwenwiki.com",//代理请求地址pathRewrite:{//重写Path"^/api":"/api/FingerUnion";//地址},changeOrigin:true//允许跨域}}}}第二步：在api文件下的base.js（存放路径）添加配置proxyURL:"/api"constbase={baseURL:"http://iwenwiki.com",proxyURL:"/api",banner:"/api/blueberrypai/getIndexBanner.php",list:"/list.php",}exportdefaultbase;第三步：将请求数据封装在api文件下的index.js（封装请求）importbasefrom'./base'importaxiosfrom'../utils/request'constapi={getBanner(){returnaxios.get(base.baseURL+base.banner)},getList(params){返回axios.get(base.proxyURL+base.list,{参数：参数}）}}导出默认API；第四步：将api文件导入全局main.js或者在任意组件中importapifrom'./api'，如果导入到全局，需要挂载api到Vue原型（Vue.prototype.$api=api;),然后调用api中封装的网络请求函数this.$api.getList({//本例将api引入全局页面:1}).then(res=>{console.log(res.data);})开发环境跨域方案：生产环境跨域CORS后台方案跨域方案：跨域CORS后台方案
